我想將類名與變數計數連接起來，每次單擊按鈕后都會不斷更新，為此我收到錯誤，因為“citysName 為空”。誰能建議
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;
})
})
uj5u.com熱心網友回復：
首先，這不是您使用模板文字添加變數的方式，您可以在此處閱讀更多相關資訊： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
其次，當您剛剛制作了可以用作參考的元素并且如果您需要其中的某些內容時，為什么還要再次查詢它，card使用您已經擁有的變數來訪問它比在檔案中查找它要容易得多
也許是這樣的，但如果沒有更多的代碼等就很難說
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;
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411879.html
標籤：
上一篇：Css改變兩個標題之間的間距