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; }) })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; }) })