let myvariable = document.querySelectorAll('.my-button'); myvariable.addEventListener('click', function (e) { var button = e.target; if (button.getAttribute('data-reset') === 'true') { // Reset the filters var filter = button.getAttribute('data-filter'); resetFilter(filter); } else { // Filter the tag var filter = button.getAttribute('data-filter'); var tag = button.getAttribute('data-filter-tag'); filterTag(filter, tag); } });Esto es lo que tengo.
Tengo varios my-buttons, así:
<button class="my-button"></button> <-- works <button class="my-button"></button> <-- does not work <button class="my-button"></button> <-- does not work Y quiero que todos ellos sean el objetivo de addEventListener . ¿El problema? Solo funciona el primer botón, el resto parece no funcionar.
¿Qué estoy haciendo mal?
Tenga en cuenta que también probé getElementsByClassName . pero eso también fracasó...
Adjunte el detector de eventos a todos los botones usando forEach
Prueba así
Array.from(document.querySelectorAll('.my-button')).forEach(item => { item.addEventListener('click', function(e) { var button = e.target; if (button.getAttribute('data-reset') === 'true') { // Reset the filters var filter = button.getAttribute('data-filter'); resetFilter(filter); } else { // Filter the tag var filter = button.getAttribute('data-filter'); var tag = button.getAttribute('data-filter-tag'); filterTag(filter, tag); } }); });