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

Question

不太清楚为什么我不能从 getElementsByClassName 创建点击事件处理程序。我可以填充并查看所有产品的所有呈现的 html，该按钮的类名称为 AddToCart。但是 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>

如何在单击“添加到购物车”按钮时获取 item.id？

Answer 1

您试图在元素存在于 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>