包含getAttribute的函数无返回值 点击按钮控制台无输出如何解决

• 选择器方法使用错误：document.querySelector() 仅返回匹配到的第一个DOM节点，无法通过Array.from转为包含多个按钮的数组，需替换为返回全部匹配节点的document.querySelectorAll("[data-buttons]")。
• 属性获取参数错误：getAttribute() 传入的参数应为纯属性名，不需要带CSS属性选择器的方括号标识，需将getAttribute("[data-pick]")调整为getAttribute("data-pick")。

修复后可运行代码 #

const allButtons = document.querySelectorAll("[data-buttons]");

Array.from(allButtons).forEach(button => {
    button.addEventListener("click", () => {
        let userPick = button.getAttribute("data-pick");
        // 也可以用原生dataset API简化写法：let userPick = button.dataset.pick;
        console.log(userPick);
    });
});

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