为什么"onclick"只工作一次而无法更新？

Question

我试图理解为什么这个onclick按钮只工作一次。基本上，我是在测试是否"心脏"或";wishlist"按钮被点击。当点击时,console.log产品的名字,这样我就能确认一下。但它只选取第一个产物。当我点击愿望清单按钮上的第二个产品。它给出了这个误差"Uncaught SyntaxError: Invalid or unexpected token (at products:1:10)"当我去这条线只是秀">

我也试过使用

const wishlistBtn = document.querySelector('.wishlistBtn');
wishlistBtn.addEventListener('click', (product_name) => { console.log(product_name) })

但它只是返回属性为空。我想知道，如果原因是因为innerHTML我包括所有这些在。

Javascript:

const getProducts = () => {
return fetch('/get-products', {
method: 'POST',
headers: new Headers({'Content-Type':'application/json'}),
body: JSON.stringify({})
})
.then(res => res.json())
.then(data => {
createProductCards(data);
})
}
var wishlist = (product_name) => {
console.log(product_name);
}

const createProductCards = (data) => {
let parent = document.querySelector('.container');
let start = '<div class="product-container">';
let middle = '';
let end = '</div>';
for(let i = 0; i < data.length; i++){
if(data[i].id != decodeURI(location.pathname.split('/').pop()) && !data[i].draft){
middle += `
<div class="product-card">
<div class="product-image">
${data[i].discount === '0' ? ``:`
<span class="discount-tag">${data[i].discount}% off</span>
`}
<img src="${data[i].images[0]}" class="product-thumb" alt="">
<button class="card-btn wishlistBtn" onclick="wishlist('${data[i].name}')"><i class="bi-heart"></i></button>
</div>
<div class="product-info">
<h6 class="product-brand"><a href="/products/${data[i].id}">${data[i].name}</a></h6>
${data[i].discount === '0' ? `<span class="price">$${data[i].totalPrice}</span>`:`
<span class="price">$${data[i].totalPrice}</span>
<span class="actual-price">$${data[i].actualPrice}</span>
`}
</div>
</div>
`;
}
}
parent.innerHTML = start + middle + end;
}
getProducts();

Answer 1

document.querySelector只作用于第一个匹配的元素。您可能需要使用document.querySelectorAll&在for循环完全完成执行后附加事件

const wishlistBtn = document.querySelectorAll('.wishlistBtn').forEach((item) => {
item.addEventListener('click', getProductName)
})
function getProductName(product_name) {
console.log(product_name)
})

下面是一个例子

document.querySelectorAll('.test').forEach(item => {
item.addEventListener('click', getButtonValue)
})
function getButtonValue(elem) {
console.log(elem.target.innerHTML)
}

<button class="test">1</button>
<button class="test">2</button>
<button class="test">3</button>
<button class="test">4</button>
<button class="test">5</button>
<button class="test">6</button>

Answer 2

document.querySelector只返回选择器的第一个实例。因此，页面上的第一个愿望列表按钮是唯一一个附加侦听器的按钮。

如果您来自JQuery，这是一个微妙的区别。要将事件侦听器添加到每个.wishlistBtn，您可以这样做:

const wishlistBtns = document.querySelectorAll('.wishlistBtn');
[...wishlistBtns].forEach(wishListButton => wishListButton.addEventListener('click', (product_name) => { console.log(product_name) })

有两个区别:

1. 使用querySelectorAll返回所有匹配.wishlistBtn选择器的元素的NodeList。
2. 遍历NodeList并为每个单独的节点添加一个事件侦听器。不幸的是，NodeList并不完全是一个数组，所以[...wishlistButtons]是一种快速而肮脏的方法，可以使用相对较新的扩展操作符...
将其转换为数组。

Answer 3

我似乎找到我的问题了。问题是我的一个产品由于某种原因里面有报价，但是一旦删除了onclick多次工作，同时将产品名称发送给一个函数来跟踪。

给出的答案的问题还在于，我不想在按钮本身<button class=“test”>Item</button>内显示名称，而不是这是我需要的<button onclick=‘func(${passname})></button>，这样在尝试时就不会起作用，但它给了我一个一般的想法，供将来参考。谢谢!