如何通过onclick事件发送变量？

Question

我创建了一个数组。 该数组创建具有特定和公共属性的按钮。 将它们附加到div(id=form2)之后，我给他们提供了点击功能gold_2。 一切工作正常，但我无法捕获最终单击的按钮的ID或值。

当我定义btn.onclick=gold_2(value)以导出变量值时，该函数将执行链接，而我已经单击了该按钮。 当我定义btn.onclick=gold_2时，无法捕获单击的按钮 id / value 。

var gold_item = ['CL', 'LR', 'GR', 'TP', 'JH', 'CH', 'HR', 'CK', 'BA', 'BL', 'CP', 'MG', 'XY', 'SC', 'BC', 'PS', 'MS', 'KL', 'DM', 'NP', 'PN', 'DN', 'GC', 'RG', 'CD'];

for (var i = 0; i < gold_item.length; i++) {
  var btn = document.createElement("BUTTON");
  //btn.innerHTML=goldItem[i];
  btn.className = "form2_button";
  btn.id = gold_item[i];
  btn.value = gold_item[i];
  btn.innerHTML = gold_item[i];
  var value = gold_item[i];
  document.getElementById('form2').appendChild(btn);
  btn.onclick = gold_2, 'value';
}

function gold_2() {
  var val = document.getElementById(id).value
  alert(val);
}

Answer 1

使用this和addEventListener而不传递value

问题在于您正在使用逗号运算符b / w gold_2和"value"。整个表达式将计算为最后一个表达式，即"value"。

我建议您使用eventListeners而不是直接更改函数

btn.addEventListener('click',gold_2);

第二个问题是id内的undefined是gold_2。您可以使用this来访问元素

function gold_2() {
  var val = this.value
  alert(val);
}

由于您将value设置为element的值，因此无需将其作为参数传递。 this中的gold_2是被单击的元素，因此您可以访问其值。

使用包装函数传递变量

如果您仍然想将value变量传递给gold_2，则可以使用包装函数。还要删除''周围的value

btn.onclick = () => gold_2(value);

然后，您还需要在函数gold_2中接受一个变量

function gold_2(val) {
  alert(val);
}