资源

Question

我有两个（或更多）按钮具有相同的类。我想编写一个函数，将变量设置为单击按钮的值，并希望将此函数应用于我的所有按钮。我已经阅读了关于这个＆＃39;这个＆＃39;关键字（such as this one），但仅当我将onclick方法放在内联中时我才会这样做。

Here is a codepen

这是我的代码：

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

另外，我不确定但是我是否需要使用循环将函数应用于每个按钮？如：

 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

功能getElementByClass不存在，请改用querySelector。
遍历您的按钮元素并添加onclick事件。

建议：改为使用addEventListener。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

资源

Answer 3

您的代码中存在多个错误：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

是的，您需要在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

如果使用jquery，则使用以下任一方法而不进行循环。

这会为点击的按钮设置值

var valueToSet ='XX';
$（document）.on（'click'，'.button'，function（）{ $（本）.VAL（valueToSet）; }）;
这将为具有类名按钮
的每个元素设置相同的值
var valueToSet ='XX';
$（document）.on（'click'，'.button'，function（）{ $（ '按钮'）VAL（valueToSet）。 }）;
如果除了按钮
之外还有其他带有类名按钮的元素，请使用此选项
var valueToSet ='XX'; $（ “button.button”）。点击（函数（）{ if（$（this）.attr（“class”）=='button'）{ $（ 'button.button'）VAL（valueToSet）。 } }）;

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

5 个答案:

资源