• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

211
Views
¿Podemos usar el nombre de la variable js como nombre de clase en html?

Quiero concatenar el nombre de la clase con el recuento de variables que se sigue actualizando después de cada clic en el botón, por lo que recibo un error como "citysName is null". alguien puede sugerir

 button.addEventListener('click', resp => { count = count +1; var card = document.createElement('card'); card.innerHTML = ` <img src="..." class="card-img-top" alt="..."> <div class="card-body"> **<h5 class="card_title" + count></h5> <h6 class="temp" + count></h6> <p class="card-text" + count></p>** <a href="#" class="btn-primary"></a> </div> `; card.className = 'card'; var content = document.getElementById('id1'); content.appendChild(card); **var citysName = document.querySelector('.card_title'+count); var description = document.querySelector('.card-text'+count); var temp = document.querySelector('.temp'+count);** fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc') .then(post => post.json()) .then(data => { var cityName = data['name']; var temper = data['main']['temp']; var descrip = data['weather'][0]['description']; let ctemp = Math.round(temper-273); citysName.innerHTML = cityName; temp.innerHTML = ctemp + "°C"; description.innerHTML = descrip; }) })
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

En primer lugar, no es así como se agregan variables usando literales de plantilla. Puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

En segundo lugar, ¿por qué lo vuelve a consultar cuando acaba de crear el elemento? Puede usar la card como referencia y si necesita algo dentro de él, es mucho más fácil acceder a él usando la variable que ya tiene, además de buscarlo en su documento.

Tal vez algo como esto, pero es difícil saberlo sin más código, etc.

 button.addEventListener('click', resp => { count = count +1; var card = document.createElement('card'); card.innerHTML = ` <img src="..." class="card-img-top" alt="..."> <div class="card-body"> **<h5 class="card_title${count}"></h5> <h6 class="temp${count}"></h6> <p class="card-text${count}"></p>** <a href="#" class="btn-primary"></a> </div> `; card.className = 'card'; var content = document.getElementById('id1'); content.appendChild(card); var citysName = card.querySelector('.card_title'+count); var description = card.querySelector('.card-text'+count); var temp = card.querySelector('.temp'+count); fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc') .then(post => post.json()) .then(data => { var cityName = data['name']; var temper = data['main']['temp']; var descrip = data['weather'][0]['description']; let ctemp = Math.round(temper-273); citysName.innerHTML = cityName; temp.innerHTML = ctemp + "°C"; description.innerHTML = descrip; }) })
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error