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

我有两个（或更多）按钮与同一类。我想编写一个函数，将变量设置为单击按钮的值，并将此函数应用于我的所有按钮。我已经读过关于'this'关键字（）的帖子，但它只在我将

onclick

方法内联时起作用，我不想这样做

这是我的密码：

<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;

按钮1
按钮2
var button=document.getElementByClass（'button'）；
var值；
功能选择值（单击按钮）{
值=单击的按钮。值；
}
button.onclick=选择值；

此外，我不确定，但我是否需要使用循环将功能应用于每个按钮？例如：

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

for（var i=0；i

函数
getElementByClass
不存在，请改用
querySelector
在按钮元素上循环并添加onclick事件

建议：改用
addEventListener


var buttons=document.querySelectorAll（'.button'）；
var值；
函数selectValue（）{
value=this.value；
console.log（值）；
}
用于（按钮的btn）
btn.onclick=selectValue；
按钮{
宽度：70px；
高度：40px；
}
按钮1
按钮2
您的代码中有几个错误：


没有
getElementByClass
函数。我不知道您的代码如何运行。它名为
getElementsByClassName
getElementsByClassName
返回一个元素数组（在您的示例中为2个），因此必须循环遍历该数组并添加
onclick
事件
要访问
onclick
事件处理程序中的当前按钮，请使用
this
。由于函数的签名是固定的，因此无法将任何参数传递给函数。它会被传递到事件本身的引用，而不是被单击的元素，因此名称
clicked_button
具有欺骗性。我们通常称该参数为eter
event
，简称
e
。您可以使用
event.target
访问元素，但使用
此
更简单

试试这个（我添加了
console.log
行只是为了演示，但您不需要它）：


var值；
var buttons=document.getElementsByClassName（'button'）；
对于（变量i=0；i

按钮1
按钮2
是，您需要使用循环HTMLCollection
按钮

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

函数选择值（事件）{
value=event.target.value；
}
var button=document.getElementsByClassName（'button'）；
对于（变量i=0；i
如果使用jquery，则可以使用以下任一项而不进行循环

这将为单击的按钮设置值

var valueToSet='XX'；

$（文档）.on（'单击'，'按钮'，函数（）{
$（this）.val（valueToSet）；
}))

这将为每个具有“类名”按钮的元素设置相同的值

var valueToSet='XX'；

$（文档）.on（'单击'，'按钮'，函数（）{
$（'.button'）.val（valueToSet）；
}))

在除按钮外还有其他元素具有类名button的情况下使用此选项

var valueToSet='XX'；
$（“button.button”）。单击（函数（）{
if（$（this）.attr（“类”）==“按钮”）{
$（'button.button'）.val（valueToSet）；
}
}))

如果OP使用
GetElementsByCassName（）
，那么OP代码是否正确？@HamzaAbdaoui不，OP需要在按钮元素上循环感谢您的帮助，这也可以按预期工作。querySelector应该优先于GetElementsByCassName吗？@oHaut您可以同时使用：-）谢谢，这非常有效。对不起，关于elementsByClassName，我的代码笔写得有点太快了，我还在开始。唯一让我困惑的是这个概念。基本上，这指的是被点击的内容。正确吗？
这取决于上下文。在事件处理程序的上下文中，它引用引发事件的元素。在你的例子中，是的，它指的是被点击的按钮。你能用任何东西编辑你的答案吗？只是除非你编辑答案，否则我不能删除我的否决票
function selectValue(event) {
  value = event.target.value;
}
var button = document. getElementsByClassName('button');
for (var i = 0; i < button.length; i++) {
  button[i].onclick = selectValue;
}