Javascript 捕捉按钮的值

获取按钮的值并将其打印到控制台

我目前有许多html按钮，它们都有相同的ID，但值不同。 单击按钮时，我希望将其值打印到控制台

document.getElementById("calcButtonID").addEventListener("click", btnPress);


function btnPress() {

  var x = document.getElementById("calcButtonID").value

  console.log(x);

}

它始终显示第一个按钮1的值，而不考虑我单击的按钮

我做错了什么？我认为我需要将事件侦听器传递给函数，以便它知道单击了什么按钮，而不仅仅是它遇到的第一个ID

---

感谢我的帮助：

正如问题注释中所指出的，您可以使用e.target.value，或在按钮中添加数据属性，但由于您询问了自己的错误，我将为您回答该特定问题，以避免将来出现此类问题。 基本上，ID在第页上必须是唯一的。因此，您的主要错误是几个按钮具有相同的ID。但是，如果出于某种原因需要将它们作为单个元素处理，它们可以共享的是name属性。 但是，在最新的情况下，我建议使用一组具有相同名称的单选按钮，但同样具有不同的唯一id。

您不能有多个id=calcButtonID或任何其他给定id值的元素。id必须始终是唯一的

使用class属性代替id。下面是一个例子：

//获取按钮的节点列表 const buttons=document.querySelectorAll'.report value'； //将节点列表转换为数组，这样我们就可以使用列表中的数组方法 const buttonsArray=Array.frombuttons； //现在迭代按钮列表。。。 buttonsArray.forEachfunctionbutton{ //…这样我们就可以给每个按钮一个单击侦听器 按钮。addEventListener“单击”，functionevent{ //在事件侦听器函数中，`this`指向单击的按钮 console.logthis.value； //或者，您可以从作为event.target隐式传递的事件对象获取单击的按钮 console.logevent.target.value； }; }

---

id是仅一个html元素的唯一标识符。如果要查找多个元素，请使用类。这里有一个例子

var buttons=document.getelementsbyclassnamcalcbutton forvar i=0；i1 2. 3.

---

4您可以使用onclick=somefunction在按钮上传递一些值来获取目标值，首先设置btnpress，然后设置e.target.value，但按钮没有值，为什么要获取按钮值？不能有多个id=calcButtonID或任何其他给定id值的元素。id必须在任何时候都是唯一的。我目前有很多按钮html都有相同的id。。。错误的在HTML中，每个元素Id都必须是唯一的。