如何将函数应用于具有相同类的多个元素？

Question

I have two (or more) buttons with the same class. I want to write a function that sets a variable to the clicked button's value, and want to apply this function to all my buttons. I've read post regarding the 'this' keyword ( such as this one ) but it only works if I place the onclick method inline which I don't want to do.

Here is a codepen

Here is my code:

<button class='button' type='button' value='X'>Button 1</button>
<button class='button' type='button' value='Y'>Button 2</button>

var button = document.getElementByClass('button');
var value;

function selectValue(clicked_button) {
      value = clicked_button.value;
}

button.onclick = selectValue;

Also, I am not sure but do I need to use a loop to apply the function to every button? Such as:

 for(var i = 0; i <= button.length; i++) {
  button[i].onclick = selectValue; 
}

Answer 1

document.querySelectorAll("button")
    .forEach(btn => btn.addEventListener("click", e => selectValue(btn)));

Answer 2

• The function getElementByClass doesn't exist, use querySelector instead.
• Loop over your button elements and add the onclick event.

Recommendation: Use addEventListener instead.

 var buttons = document.querySelectorAll('.button'); var value; function selectValue() { value = this.value; console.log(value); } for (btn of buttons) btn.onclick = selectValue;

 button { width: 70px; height: 40px; }

 <button class='button' type='button' value='X'>Button 1</button> <button class='button' type='button' value='Y'>Button 2</button>

Resources

• document.querySelectorAll()
• EventTarget.addEventListener()

Answer 3

There are several errors in your code:

• There is no getElementByClass function. I don't know how your code runs. It's called getElementsByClassName .
• The getElementsByClassName returns a array of elements (2 in your example), so you'll have to loop through it and add the onclick event.
• To access the current button inside the onclick event handler, use this . You cannot pass whatever parameters you want to the function because its signature is fixed. It gets passed a reference to the event itself, not the clicked element, so the name clicked_button is deceiving. We usually call that parameter event , or e for short. You can access the element using event.target , but using this is just easier.

Try this (I added the console.log line just for demo, but you don't need it):

 var value; var buttons = document.getElementsByClassName('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = selectValue; } function selectValue() { value = this.value; console.log(value); }

 <button class='button' type='button' value='X'>Button 1</button> <button class='button' type='button' value='Y'>Button 2</button>

Answer 4

Yes you need to use loop over HTMLCollection buttons

function selectValue(event) {
  value = event.target.value;
}
var button = document. getElementsByClassName('button');
for (var i = 0; i < button.length; i++) {
  button[i].onclick = selectValue;
}

Answer 5

If using jquery, you use either of the following without looping.

1. This will set value to the clicked button

   var valueToSet = 'XX';
   $(document).on('click', '.button', function () { $(this).val(valueToSet); });

2. This will set same value for every element with class name button

   var valueToSet = 'XX';
   $(document).on('click', '.button', function () { $('.button').val(valueToSet); });

3. Use this in a case where there are other elements with class name button other than the buttons

   var valueToSet = 'XX'; $("button.button").click(function(){ if($(this).attr("class") == 'button'){ $('button.button').val(valueToSet); } });