按钮 btn.addEventListener.console.log("hello") 的 onclick 未显示。我也尝试过使用高级功能

Question

        import {products} from"../html/products.js";
        let productsHTML="";
        products.forEach(x => {
         productsHTML+=`<div class="products">
        <div class="image">
        <img class="img"src="${x.image}" alt="">
        </div>
        <div class="content">
        <div class="productName">${x.name}</div>
        <div class="productPrice">Rs.${x.price}</div>
        <select name="number"  id="productQuantity" class="select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <button class="addtocart" >Add To Cart</button>
        </div>
        </div>
        `
         });
         document.querySelector(".totalHTML").innerHTML=productsHTML;

---

//problem is here://

const btn=document.querySelector(".addtocart");
console.log(btn);
btn.addEventListener("click",function(){
console.log("hello");
});

---

#控制台中没有“hello”

这是我的电子商务项目。

在此输入图片描述

按钮 addEventListener.console.log("hello") 的 onclick 未显示。 我也尝试过使用高级功能。

我正在尝试检查我的点击是否有效，以便进一步使用 onclick 来获取购物车数量的 html 的数量（输入）。 并使用该数字来增加购物车数量，并使用 onclick 来计算价格。 所以请帮助我并使 addeventlistener 可行。 btn.addEventListener("点击",()=>{ }); 看起来您正在尝试向脚本运行时可能不存在于 DOM 中的按钮添加事件侦听器。由于您是在循环内动态生成按钮，因此您需要将事件侦听器单独附加到每个按钮。尝试像这样修改你的代码： products.forEach(x => { productsHTML += ` <div class="products"> <div class="image"> <img class="img" src="${x.image}" alt=""> </div> <div class="content"> <div class="productName">${x.name}</div> <div class="productPrice">Rs.${x.price}</div> <select name="number" id="productQuantity" class="select"> <option value="1">1</option> <option value="2">2</option> ... <option value="10">10</option> </select> <button class="addtocart">Add To Cart</button> </div> </div> `; }); // Update the HTML document.querySelector(".totalHTML").innerHTML = productsHTML; // Select all "Add To Cart" buttons const buttons = document.querySelectorAll(".addtocart"); // Add event listeners to each button buttons.forEach((btn, index) => { btn.addEventListener("click", () => { console.log("hello"); const quantity = document.querySelectorAll(".select")[index].value; console.log(`Quantity: ${quantity}`); // Further logic to handle the cart can be added here }); });