button.value returns "" 。预期 - 文本值

Question

我正在研究“剪刀石头布”。在项目早期 button.value 用于 return it 元素的文本值。然后，我更改了代码中的某些内容，但不够聪明，无法提交最后的工作更改。所以现在我正在处理这个。我可以用其他东西代替 .value，但我只想弄清楚哪里出了问题。为什么我现在得到的“buttons”元素的值是“”而不是文本值

       <div id="buttonHolder">
            <button type="submit" id="rock" >Rock</button>
            <button type="submit" id="paper">Paper</button>
            <button type="submit" id="scissors">Scissors</button>
        </div>


**//script**

let buttons = document.querySelectorAll("button");


buttons.forEach((button) => {
    button.addEventListener("click",() =>{
        let playerSelection = button.value;
        playRound(playerSelection, computerSelection);
    })
});

Answer 1

例子

      <div id="buttonHolder">
        <button type="submit" id="rock" value="rock">Rock</button>
        <button type="submit" id="paper" value="paper">Paper</button>
        <button type="submit" id="scissors" value="scissors">Scissors</button>
      </div>

document.querySelectorAll("button").forEach((button) => {
    button.addEventListener("click", function() { // cannot use () => {
        const playerSelection = this.value;
        playRound(playerSelection, computerSelection);
    })
});

您不能在 addEventListener 调用中使用 () => 因为 this.value 将不起作用

Answer 2

基本上正如评论中指出的那样，按钮元素没有设置 value 属性（在这种情况下无论如何都不值得手动定义一个值），所以你不能在您的原始实施中使用它。

可能的方法

您可以访问以下属性以轻松获取元素中包含的文本：

要知道什么时候应该使用 HTMLElement.innerText 而不是 node.textContent 或 HTMLElement.innerHTML，请转到 see the differences at the MDN docs - 或查看我所做的总结：

textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows “human-readable” elements. textContent returns every element in the node. In contrast, innerText won’t return the text of “hidden” elements and is aware of styling.

Since innerText takes CSS styles into account, reading the value of innerText triggers a computationally expensive reflow to ensure up-to-date computed styles (this should be avoided when possible).

Differences from innerHTML: Element.innerHTML returns HTML as per its name. People use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.

Moreover, using textContent can prevent XSS attacks.

注意：如前所述，为了简洁起见，文档中的内容已经过更改。

使用 node.textContent（优于 HTMLElement.innerHTML，因为前者通常在从元素中检索文本方面具有更好的性能，例如，因为它不解析 HTML):

let buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    let playerSelection = button.textContent;
    console.log(playerSelection)
    //  playRound(playerSelection, computerSelection);
  })
});

<div id="buttonHolder">
  <button type="submit" id="rock">Rock</button>
  <button type="submit" id="paper">Paper</button>
  <button type="submit" id="scissors">Scissors</button>
</div>

Answer 3

要使用箭头函数，无论范围如何，并拥有正确的按钮对象，因为您正在处理事件，您可以获得由包含单击按钮本身的按钮触发的事件对象。然后你可以检索你想要的任何属性。

   <div id="buttonHolder">
        <button type="submit" id="rock" >Rock</button>
        <button type="submit" id="paper">Paper</button>
        <button type="submit" id="scissors">Scissors</button>
    </div>

//脚本

let buttons = document.querySelectorAll("button");
  
buttons.forEach((button) => {
    button.addEventListener("click", (evt) => {
        let playerSelection = evt.target.getAttribute("id");
        playRound(playerSelection, computerSelection);
    })
});

同样对于海关属性，您可以使用数据集，这样您就可以扩展到任何您想要的。 “data-”后的文字是您的数据名称。

   <div id="buttonHolder">
        <button type="submit" id="rock" data-type="rock" data-for-example="eg">Rock</button>
        <button type="submit" id="paper" data-type="paper" data-for-example="eg">Paper</button>
        <button type="submit" id="scissors" data-type="scissors"data-for-example="eg">Scissors</button>
   </div>

//脚本

let buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
    button.addEventListener("click", (evt) => {
        let playerSelection = evt.target.dataset.type; //target is the dom element
        let example = evt.target.dataset.forExample; //for-example become forExample
        playRound(playerSelection, computerSelection);
    })
});

button.value returns "" 。预期 - 文本值

button.value returns "" . Expected - text value

javascript

dom-events

可能的方法