Tengo un sitio products.html donde todos los productos se enumeran en un contenedor y donde puede agregarlos al carrito usando el botón "Agregar al carrito". El cuerpo de mi sitio se ve así
<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 © 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>Tengo varios productos que leo y los coloco en el sitio usando el método de clonación.
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); });Si tengo, por ejemplo, 15 productos en el sitio, ¿cómo puedo escuchar cada clic en el botón "Agregar al carrito" y llamar a una función? los botones no tienen id ni clase. forEach no funciona para mí, ¿así que no reconoce que hay varios botones?
Después de clonar el botón, debe asignarle un atributo para definir con qué producto está asociado. Algo como
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); ...Cambio
document.getElementsByTagName('button')a
productContainer.getElementsByTagName('button')Antes de agregar, no existe en el documento.