包含 getAttribute 的函数没有返回答案

【问题标题】：No returns from a function which contains getAttribute包含 getAttribute 的函数没有返回
【发布时间】：2021-08-02 13:36:11
【问题描述】：

我正在尝试显示按钮的值，但当我按下按钮时，控制台中没有显示任何内容。

我遗漏了一些东西，我无法弄清楚。

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

    Array.from(allButtons).forEach(button => {
        button.addEventListener("click", () => {
            let userPick = button.getAttribute("[data-pick]");
            console.log(userPick);
        });
    });

谢谢！ :)

【问题讨论】：

getAttribute("data-pick") 不带方括号
querySelector 仅返回 null 或第一个元素不是找到的列表，不能转换为数组，因此在使用 Array.from 时最终得到一个空数组，您可能打算使用querySelectorAll

标签： javascript getattribute

【解决方案1】：

你可以直接遍历querySelectorAll返回的Nodelist

document.querySelectorAll("[data-buttons]").forEach(button => {
  button.addEventListener("click", () => {
    let userPick = button.getAttribute("data-pick");
    console.log(userPick);
  });
});

<button data-buttons="1" data-pick="1"> 1</button>
<button data-buttons="2" data-pick="2"> 2</button>
<button data-buttons="3" data-pick="3"> 3</button>

【讨论】：

【解决方案2】：

如果您有多个按钮，则需要使用querySelectorAll

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

    Array.from(allButtons).forEach(button => {
        button.addEventListener("click", () => {
            let userPick = button.getAttribute("data-pick");
            console.log(userPick);
        });
    });

<button data-buttons="1" data-pick="1"> 1</button>
<button data-buttons="2" data-pick="2"> 2</button>
<button data-buttons="3" data-pick="3"> 3</button>

【讨论】：

对不起，伙计，你的答案好多了，但看起来我们同时提交了:(

【解决方案3】：

你需要使用dataset对象来读取data-相关的属性，像这样

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

Array.from(allButtons).forEach(button => {
    button.addEventListener("click", () => {
        let userPick = button.dataset.pick;
        console.log(userPick);
    });
});

【讨论】：

这段代码不会循环遍历所有按钮，而只会循环一个。

【解决方案4】：

请看下面的注释代码：

// USE "querySelectorAll" INSTEAD OF "querySelector" TO ACTUALLY GET AN ARRAY-LIKE (NodeList) RESULT.
const allButtons = document.querySelectorAll("[data-buttons]");

// YOU CAN DIRECTLY USE "forEach" ON A NodeList INSTANCE.
allButtons.forEach(button => {
    button.addEventListener("click", ({target}) => {
        // "getAttribute" NEEDS ATTRIBUTE NAME AS INPUT WITHOUT "[]".
        // YOU CAN USE "e.target" INSTEAD OF "button" HERE.
        const userPick = target.getAttribute("data-pick");
        console.log(userPick);
    });
});

<button data-buttons data-pick="A">Button A</button>
<button data-buttons data-pick="B">Button B</button>
<button data-buttons data-pick="C">Button C</button>
<button data-buttons data-pick="D">Button D</button>
<button data-buttons data-pick="E">Button E</button>

【讨论】：