我想簡單地從 api 獲取和顯示資料，到我想添加按鈕的每個專案，在該按鈕可以單擊并將專案添加到收藏夾。如果我試圖將 item.name 作為引數傳遞給函式，我得到一個錯誤
index.html:1 Uncaught ReferenceError: Buzz 未在 HTMLButtonElement.onclick (index.html:1:10) 中定義
如果我通過 item.id 對我來說有什么奇怪的，它作業正常。
async function getAllBeers() {
const response = await fetch("https://api.punkapi.com/v2/beers");
const data = await response.json();
displayAllBeers(data);
}
getAllBeers();
function displayAllBeers(data) {
const beersContainer = document.getElementById("beersContainer");
data.map((beer) => {
console.log(beer.name);
beersContainer.innerHTML = `
<div class='beerContainer'>
<h3 class='name'>${beer.name}</h3>
<img src='${beer.image_url}'></img>
<p>${beer.description}</p>
<button onclick='addToFav(${beer.name})'>Add to Favourite</button>
</div>
`;
});
}
function addToFav(name) {
console.log(name);
}
uj5u.com熱心網友回復：
你錯過了參考'${beer.name}'
我建議你委托
const beersContainer = document.getElementById("beersContainer");
const displayAllBeers = data => {
beersContainer.innerHTML = data.map((beer) => `
<div class='beerContainer'>
<h3 >${beer.name}</h3>
<img src="${beer.image_url}" />
<p>${beer.description}</p>
<button >Add to Favourite</button>
</div>`).join("");
};
const addToFav = name => {
console.log(name);
};
beersContainer.addEventListener("click", function(e) {
const tgt = e.target.closest(".add")
if (tgt) addToFav(tgt.closest(".beerContainer").querySelector(".name").textContent)
});
async function getAllBeers() {
const response = await fetch("https://api.punkapi.com/v2/beers");
const data = await response.json();
displayAllBeers(data);
}
getAllBeers();<div id="beersContainer"></div>uj5u.com熱心網友回復：
考慮一下當占位符被替換為資料時會變成什么：
<button onclick='addToFav(${beer.name})'>Add to Favourite</button>
它變成了這樣：
<button onclick='addToFav(Buzz)'>Add to Favourite</button>
所以你正在嘗試 eo 執行這個：
addToFav(Buzz)
正如錯誤狀態，Buzz未定義。大概您打算將此文字值設為字串：
addToFav('Buzz')
字串周圍有引號。因此，您的動態代碼生成邏輯需要包含這些引號：
<button onclick="addToFav('${beer.name}')">Add to Favourite</button>
（請注意，我還用雙引號替換了屬性值周圍的引號，這更符合 HTML 標準，并且可以防止這些單引號干擾屬性值。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/505116.html
標籤：javascript