点击按钮时JS显示[object HTMLButtonElement]而非按钮value值问题求助

点击按钮时，JavaScript未显示按钮的原始value值，而是显示[object HTMLButtonElement]。期望点击对应按钮时显示其value值，例如点击value为3的按钮时显示3而非对象标识。

原始代码 #

HTML代码 #

<div class="col-3">
    <button onclick="val(this)" id="n1" value="1" type="button" class="btn btn-outline-primary "
        style="width:100%" value="1">1</button>
</div>
<div class="col-3">
    <button onclick="val(this)" id="n1" value="2" type="button" class="btn btn-outline-primary "
        style="width:100%" value="2">2</button>
</div>

JavaScript代码 #

function val(num) {
  let n = num;
  document.getElementById("ta").innerHTML = n;
}

问题原因与修复 #

问题出在你直接把按钮DOM对象赋值给了n，将其插入页面时，浏览器会默认调用DOM对象的toString()方法，返回[object HTMLButtonElement]。

要获取按钮的value值，只需访问DOM对象的value属性即可：

修正后的JavaScript代码 #

function val(num) {
  let n = num.value; // 访问按钮的value属性
  document.getElementById("ta").innerHTML = n;
}

额外优化提示 #

• HTML中按钮重复设置了两次value属性，建议只保留一个，避免冗余。
• 两个按钮使用了相同的id="n1"，ID在页面中需唯一，建议修改为n1、n2这类不同ID，避免后续操作冲突。

内容的提问来源于stack exchange，提问作者Path Parakh