Javascript 当用户单击某个按钮时，如何获取该按钮的值？

我有四个按钮：

<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>

我读到可能需要使用.attr，但是不确定如何向按钮添加自定义属性

编辑：您应该为唯一元素使用ID，为重复元素使用类

因此，如果要在按钮上将ID替换为class，则代码应如下所示：

从开头删除声明，而是使用它在click函数中存储值

通过这种方式，您将获得具有指定类的clicked按钮的值

$('.button-yardSize').on('click', function(){
    var inputYardSize = $(this).val();
    console.log(inputYardSize);
})

---

首先，您应该使用类，而不是ID。ID应该是唯一的，$button yardSize将只选择第一个按钮

在事件侦听器中，您可以使用它来引用已单击的按钮

您需要在函数内指定inputYardSize变量。on只返回要将处理程序绑定到的jQuery对象，而不是函数内部的值

$.button-yardSize.onclick，函数{ var inputYardSize=$this.val； console.loginputYardSize； }; 2. 4. 6.

---

8每个元素的id必须是唯一的

<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>

你没有把.val存储在任何地方。从开头删除var inputYardSize=并将其放在$button-yardSize.val前面；相反这就是说，jQuery的文档说.val应该适用于所有表单元素，所以我希望它适用于，但我个人从未尝试过。旁注：有.val的可能副本

<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>

$("#button-yardSize1").on("click", function(){
       inputYardSize=$("#button-yardSize1").val();
       console.log(inputYardSize);
});