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);
}
});
This is what I have.
I have multiple my-buttons, like so:
<button class="my-button"></button> <-- works
<button class="my-button"></button> <-- does not work
<button class="my-button"></button> <-- does not work
And I want all of them to be targeted for the addEventListener. The problem? Only the first button works, the rest does not seem to work.
What am I doing wrong?
Note, I also tried getElementsByClassName. but that also failed...
Attach event listener to all the buttons using forEach
Try like this
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);
}
});
});