javascript - 无法从getElementsByClassName创建点击事件处理程序

不太确定为什么我不能从getElementsByClassName创建单击事件处理程序。我可以填充并查看按钮的类名称为AddToCart的所有产品的所有呈现的html。但是addToCart在var addToCart = document.getElementsByClassName("AddToCart");为空

var productList = [
    { id: 101, product: "Logitech Mouse", unitprice: 45.0 },
    { id: 102, product: "Logitech Keyboard", unitprice: 50.0 },
    { id: 103, product: "HP Mouse", unitprice: 35.0 }
  ];

  const populateProducts = object => {
    // Start our HTML
    var html = "";
    debugger;
    // Loop through members of the object
    object.forEach(function(item) {
      html += `<div class="column"><div class="card">\
                <h2>${item.product}</h2>
                <p class="price">RM ${item.unitprice.toFixed(2)}</p>
                <p><button class=AddToCart>Add to Cart</button></p></div></div>`;
    });
    debugger;
    var addToCart = document.getElementsByClassName("AddToCart");

    Array.prototype.forEach.call(addToCart, function(element) {
      element.addEventListener("click", function() {
        console.log(element);
      });
    });
    return html;
  };

  window.addEventListener("load", function() {
    document.getElementById("productRow").innerHTML = populateProducts(
      productList
    );
  });

<div id="productRow"></div>

以及单击“ AddToCart”按钮后如何抓住item.id？

最佳答案

您试图在DOM中存在元素之前连接事件处理程序。在将HTML分配给innerHTML的代码之后，需要将与处理程序挂钩的代码移动到该代码。

然后，您可以将商品ID存储为按钮上的data-*属性，并通过.getAttribute("data-id")（或在现代浏览器中为.dataset.id）访问它：

var productList = [
    { id: 101, product: "Logitech Mouse", unitprice: 45.0 },
    { id: 102, product: "Logitech Keyboard", unitprice: 50.0 },
    { id: 103, product: "HP Mouse", unitprice: 35.0 }
  ];

  const populateProducts = object => {
    // Start our HTML
    var html = "";
    // Loop through members of the object
    object.forEach(function(item) {
      html += `<div class="column"><div class="card">\
                <h2>${item.product}</h2>
                <p class="price">RM ${item.unitprice.toFixed(2)}</p>
                <p><button class=AddToCart data-id="${item.id}">Add to Cart</button></p></div></div>`;
    });
    return html;
  };

  window.addEventListener("load", function() {
    document.getElementById("productRow").innerHTML = populateProducts(
      productList
    );
    var addToCart = document.getElementsByClassName("AddToCart");

    Array.prototype.forEach.call(addToCart, function(element) {
      element.addEventListener("click", function() {
        console.log("via getAttribute:", element.getAttribute("data-id"));
        console.log("via dataset:", element.dataset.id);
      });
    });
  });

<div id="productRow"></div>

请注意，您不需要为每个按钮使用单独的事件处理程序，可以重用一个函数：

var productList = [
    { id: 101, product: "Logitech Mouse", unitprice: 45.0 },
    { id: 102, product: "Logitech Keyboard", unitprice: 50.0 },
    { id: 103, product: "HP Mouse", unitprice: 35.0 }
  ];

  const populateProducts = object => {
    // Start our HTML
    var html = "";
    // Loop through members of the object
    object.forEach(function(item) {
      html += `<div class="column"><div class="card">\
                <h2>${item.product}</h2>
                <p class="price">RM ${item.unitprice.toFixed(2)}</p>
                <p><button class=AddToCart data-id="${item.id}">Add to Cart</button></p></div></div>`;
    });
    return html;
  };

  window.addEventListener("load", function() {
    document.getElementById("productRow").innerHTML = populateProducts(
      productList
    );
    var addToCart = document.getElementsByClassName("AddToCart");

    function handler() {
      console.log("via getAttribute:", this.getAttribute("data-id"));
      console.log("via dataset:", this.dataset.id);
    }

    Array.prototype.forEach.call(addToCart, function(element) {
      element.addEventListener("click", handler);
    });
  });

<div id="productRow"></div>