如何在HTML中通过onclick获取被点击按钮的value值？

先分析你原有写法的问题 #

• 第一种写法：仅获取了所有theme类的元素集合，但未关联点击事件，也没定位到触发点击的具体按钮，自然无法拿到对应value。
• 第二种写法：和HTML内联的onclick重复绑定事件；用var导致闭包变量污染，循环结束后i的值固定为最大值；且错误地读取了第一个按钮的pbtn[0].value，而非当前点击按钮的value。

方案1：修改原有内联事件，传递当前按钮对象 #

先更新HTML的onclick绑定，把当前按钮对象通过this传入：

<button class="theme" value="100" onclick="buytheme(this)">Points:100</button>
<button class="theme" value="200" onclick="buytheme(this)">Points:200</button>
<button class="theme" value="300" onclick="buytheme(this)">Points:300</button>
<button class="theme" value="400" onclick="buytheme(this)">Points:400</button>
<button class="theme" value="500" onclick="buytheme(this)">Points:500</button>
<button class="theme" value="600" onclick="buytheme(this)">Points:600</button>

再修改JS函数，接收按钮参数并读取value：

function buytheme(btn) {
    const targetValue = btn.value;
    console.log(targetValue); // 输出被点击按钮的value
    // 这里可以添加后续业务逻辑
}

方案2：移除内联事件，用事件委托（推荐，支持动态添加按钮） #

先去掉HTML中的onclick属性：

<button class="theme" value="100">Points:100</button>
<button class="theme" value="200">Points:200</button>
<button class="theme" value="300">Points:300</button>
<button class="theme" value="400">Points:400</button>
<button class="theme" value="500">Points:500</button>
<button class="theme" value="600">Points:600</button>

然后通过事件委托绑定一次事件即可：

document.addEventListener('click', function(e) {
    // 判断点击的元素是否是目标按钮
    if (e.target.classList.contains('theme')) {
        const targetValue = e.target.value;
        console.log(targetValue);
        // 后续业务逻辑
    }
});

这种方式无需遍历所有按钮，哪怕后续动态新增theme类按钮，也能自动触发事件。

方案3：遍历绑定事件（修复你原有第二种写法） #

同样先移除HTML中的onclick属性，再修改JS：

const pbtn = document.querySelectorAll("button.theme");

// 方式1：用let避免闭包问题
for (let i = 0; i < pbtn.length; i++) {
    pbtn[i].onclick = function() {
        console.log(this.value); // this指向当前被点击的按钮
    }
}

// 方式2：用forEach更简洁
pbtn.forEach(btn => {
    btn.addEventListener('click', function() {
        console.log(this.value);
        // 也可以直接用 btn.value
    });
});

内容的提问来源于stack exchange，提问作者Zeeshan Haider