如何通过Class与JavaScript获取相同按钮的Value值

问题根源分析 #

你的代码存在三个核心问题：

1. 重复ID违反HTML规范：两个按钮使用了相同的id="lbd-btn"，ID在HTML中必须唯一，会导致DOM操作出现不可预料的异常。
2. 选择器兼容性问题：getElementsByClassName("btn btn-outline-secondary")的写法虽然理论上支持多类名匹配，但实际兼容性不如标准CSS选择器，容易出现元素获取失败的情况。
3. 脚本执行时机错误：如果代码在DOM元素加载完成前执行，elements会是空集合，无法完成事件绑定。

此外，获取value值可以直接通过元素属性访问，无需使用getAttribute，逻辑更简洁高效。

修正后的完整代码 #

修正HTML（修复重复ID）

<button id="lbd-btn-1" value="1" class="btn btn-outline-secondary" style="border-radius: 20px; font-size: 14px;">Discover</button>
<button id="lbd-btn-2" value="2" class="btn btn-outline-secondary" style="border-radius: 20px; font-size: 14px;">Discover</button>

修正JavaScript（解决选择器+执行时机问题）

推荐将脚本放在</body>标签前，确保DOM已加载完成：

// 使用querySelectorAll通过标准CSS选择器获取元素，兼容性更好
const elements = document.querySelectorAll(".btn.btn-outline-secondary");

const myFunction = function() {
    console.log("lbd button clicked");
    // 直接访问元素的value属性，无需getAttribute
    const arrayID = this.value;
    console.log(arrayID);
};

// 遍历绑定点击事件
for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

如果必须将脚本放在<head>中，用DOMContentLoaded事件确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll(".btn.btn-outline-secondary");

    const myFunction = function() {
        console.log("lbd button clicked");
        const arrayID = this.value;
        console.log(arrayID);
    };

    for (let i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', myFunction, false);
    }
});

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