如何在javascript中收聽多個按鈕點擊

Question

我有一個 products.html 站點，其中所有產品都列在一個容器中，您可以在其中使用“添加到購物車”按鈕將它們添加到購物車。 我的網站正文看起來像這樣

<body>
  <header>
    <nav class="navbar">
      <ul class="nav-links">
        <li><a href="index.html">Front Page</a></li>
        <li><a href="register.html">Register</a></li>
        <li><a href="users.html">List Users</a></li>
        <li><a href="products.html">List Products</a></li>
        <li><a href="cart.html">Shopping Cart</a></li>
     </ul>
   </nav>
</header>
<main>
  <h1>Products</h1>
  <div id="notifications-container"></div>
  <div id="products-container"></div>
</main>
<footer>
  <p>Copyright &copy; 2020 diipadaa etc etc.</p>
</footer>
<template id="product-template">
  <div class="item-row">
    <h3 class="product-name"></h3>
    <p class="product-description"></p>
    <p class="product-price"></p>
    <button>Add to cart</button>
  </div>
</template>
<script src="js/utils.js"></script>
<script src="js/products.js"></script>

我有多個產品，我閱讀並使用克隆方法將它們放入站點。

const baseContainer = document.querySelector('#products-container');
const productTemplate = document.querySelector('#product-template');

products.forEach(product => {
const { name, description, price, _id } = product;
const productContainer = productTemplate.content.cloneNode(true);

productContainer.querySelector('.product-name').id = `name-${_id}`;
productContainer.querySelector('.product-name').textContent = name;

productContainer.querySelector('.product-description').id = `description-${_id}`
productContainer.querySelector('.product-description').textContent = description;

productContainer.querySelector('.product-price').id = `price-${_id}`;
productContainer.querySelector('.product-price').textContent = price;

document.getElementsByTagName('button').forEach(elem => {
  console.log(elem);
});


baseContainer.append(productContainer);
});

例如，如果我在網站上有 15 種產品，我怎么能聽到每個“添加到購物車”按鈕的點擊並調用一個函數。 按鈕沒有 id 或 class。 forEach 對我不起作用，所以它不承認有多個按鈕？

Answer 1

克隆按鈕后，您應該給它一個屬性來定義它所關聯的產品。 就像是

products.forEach(product => {
  const { name, description, price, _id } = product;
  const productContainer = productTemplate.content.cloneNode(true);
  //add a reference to the product ID in the button
  productContainer.setAttribute("data-productID", _id);
  ...

Answer 2

改變

document.getElementsByTagName('button')

到

productContainer.getElementsByTagName('button')

在您追加之前，它不存在於文檔中。

如何在javascript中收聽多個按鈕點擊

問題描述

2 個解決方案

解決方案1
0 2021-11-16 22:58:49

解決方案2
0 2021-11-16 22:59:59

如何在javascript中收聽多個按鈕點擊

問題描述

2 個解決方案

解決方案1 0 2021-11-16 22:58:49

解決方案2 0 2021-11-16 22:59:59

解決方案1
0 2021-11-16 22:58:49

解決方案2
0 2021-11-16 22:59:59