How I make QuerySelectorAll() to select all html tags and I make changes by accessing index of html tag

user_11296384 0
Viewed 107

For Example : I have the following code

    <div class="set">
    <button class =  "w drum"> w  </button>
    <button class =  "a drum"> a  </button>
    <button class =  "s drum"> s  </button>
    <button class =  "d drum"> d  </button>
    <button class =  "j drum"> j  </button>
    <button class =  "k drum"> k  </button>
    <button class =  "l drum"> l  </button>
  </div>

Now I want to select all button tags and perform .addEventListener function in all buttons .I implement it by for loop. But I wanna ask is there any way that we can implement it through the following way...

  document.querySelectorAll("button")[0,1,2,3,4,5,6].addEventListener("click",pressButton);
html javascript
7 Answers

You can add an addEventListener function to the prototype of NodeList and call that. Here you go:

NodeList.prototype.addEventListener = function(indexes, listener, eventName) {
    for (let index = 0; index < this.length; index++) {
        if (indexes.indexOf(index) >= 0) this[index].addEventListener(eventName, listener);
    }
};
function pressButton() {console.log(this.innerText);}
document.querySelectorAll("button").addEventListener([0, 1, 2, 3, 4, 5, 6], pressButton, "click");
<div class="set">
<button class =  "w drum"> w  </button>
<button class =  "a drum"> a  </button>
<button class =  "s drum"> s  </button>
<button class =  "d drum"> d  </button>
<button class =  "j drum"> j  </button>
<button class =  "k drum"> k  </button>
<button class =  "l drum"> l  </button>
</div>

user_4365600

Well you can do something like this incase you don't want to use the simple for loop

document.querySelectorAll("button").forEach(value=>
value.addEventListener("click",e=>console.log(e.target.innerText)))
<div class="set">
  <button class =  "w drum"> w  </button>
  <button class =  "a drum"> a  </button>
  <button class =  "s drum"> s  </button>
  <button class =  "d drum"> d  </button>
  <button class =  "j drum"> j  </button>
  <button class =  "k drum"> k  </button>
  <button class =  "l drum"> l  </button>
</div>

user_115572640

That is not the right approach. You have to loop through each element and add the event listener like below,

const button = document.querySelectorAll("button");

const pressButton = (e) => {
  console.log(e.target.innerText);
}

for (const btn of button) {
 btn.addEventListener("click", pressButton);
}
<div class="set">
<button class =  "w drum"> w  </button>
<button class =  "a drum"> a  </button>
<button class =  "s drum"> s  </button>
<button class =  "d drum"> d  </button>
<button class =  "j drum"> j  </button>
<button class =  "k drum"> k  </button>
<button class =  "l drum"> l  </button>
</div>

user_33836930

I would suggest you to add click listener on "drum" class

user_108502210

You can use event delegation, using e.target in the event handler. You only need to add the event listener to the parent, and then you iterate over an array of class names, performing a block of code each time.

Admin1

This should work. But I would prefer to add an id to the div instead of class as multiple elements can have the same class name

document.querySelectorAll('.set')[0].addEventListener('click', function(event){
  if(event.target.tagName === "BUTTON") {
     // do your stuff
     console.log("clicked a button");
  }
})
user_67064520

This function takes all button elements that are in the DIV element with class .set and adds them EventListener.

In the function clickMe, you can add the action you want to happen when a button is clicked.

I hope I have been helpful

var x = document.getElementsByClassName('set')[0];
var butt = x.getElementsByTagName('button');
for (var i = 0; i < butt.length; i++) {
    butt[i].addEventListener("click", clickMe);
}

function clickMe() {
    var res = this.innerText
    console.log(res);
}
<div class="set">
    <button class =  "w drum"> w  </button>
    <button class =  "a drum"> a  </button>
    <button class =  "s drum"> s  </button>
    <button class =  "d drum"> d  </button>
    <button class =  "j drum"> j  </button>
    <button class =  "k drum"> k  </button>
    <button class =  "l drum"> l  </button>
</div>

user_109681340
Related