javascript - How to select all buttons with forEach in JS dom (no jQuery) - Stack Overflow

admin管理员组

文章数量:1356433

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

Share Improve this question Follow edited Jul 6, 2018 at 17:26 user9258981 asked Jul 6, 2018 at 17:22 user9258981user9258981 15511 gold badge33 silver badges1010 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to select all buttons with forEach in JS dom (no jQuery)Stack Overflow