I want to concatinate class name with variable count which keep getting updated after each button click, for which I am getting error as "citysName is null". can anyone suggest
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;
})
})
First of all thats not how you add variables using template literals you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Second why do you query it again when you've just made the element you can use card
as reference and if you need something within it, its much easier to access it using the variable you already have other than looking for it in your document
Maybe something like this but its hard to tell withouth more code 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;
})
})