I have 3 buttons having class name "btn"; How can select all button by using addEventListener and forEach? I don't select one by one HTML codes:

<div class="display">
   <input type="number" class="text">
</div>
<div class="buttons">
   <input type="button" value="1" class="btn">
   <input type="button" value="2" class="btn">
   <input type="button" value="3" class="btn">
</div>

JS code:

  const display = document.querySelector(".text"),
  btn = document.querySelectorAll(".btn");

  btn.addEventListener("click", buttons);

  function buttons() { 
   display.value = btn.value;
   };

I have 3 buttons having class name "btn"; How can select all button by using addEventListener and forEach? I don't select one by one HTML codes:

<div class="display">
   <input type="number" class="text">
</div>
<div class="buttons">
   <input type="button" value="1" class="btn">
   <input type="button" value="2" class="btn">
   <input type="button" value="3" class="btn">
</div>

JS code:

  const display = document.querySelector(".text"),
  btn = document.querySelectorAll(".btn");

  btn.addEventListener("click", buttons);

  function buttons() { 
   display.value = btn.value;
   };

• javascript
• dom
• foreach
• addeventlistener

• 1 Your first button has the class btn1, not btn. – David Thomas Commented Jul 6, 2018 at 17:25
• this may happened by mistake... how can I apply for each to it – user9258981 Commented Jul 6, 2018 at 17:26

2 Answers 2

You can use for...of for this like:

const btns = document.querySelectorAll('.btn');
for (const btn of btns) {
  btn.addEventListener('click', function() {
    console.log(this.value);
  });
}

<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">

For using forEach(), you will have to convert btns DOM nodes to an array first using Array.from() like:

const btns = document.querySelectorAll('.btn');
Array.from(btns).forEach(function(btn) {
  btn.addEventListener('click', function() {
    console.log(this.value);
  });
});

<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">

You can use the js builtin array function foreach on the buttons selected by querySelectorAll.

I changed the variable names to be unabbreviated, more for my own sake, feel free to change them back.

Basically, you loop over all buttons and add an event handler to each one.

Note: In the event handler assigner function, you will have to use a closure, or the function will fire right away.

const
    display = document.querySelector(".text"),
    buttons = document.querySelectorAll(".btn");

buttons.forEach(button => button.addEventListener("click", alterDisplayValue(button)));

function alterDisplayValue(button) {
    return function() {
        display.value = button.value;
    }
};

You could also use an inline function in the foreach to set the click handler:

const
    display = document.querySelector(".text"),
    buttons = document.querySelectorAll(".btn");

buttons.forEach(button => button.addEventListener("click", function() {
    display.value = button.value;
}));

working: https://codepen.io/leonsegal/pen/GGbaZL