时间戳

首页 > 解决方案 > button.value 返回 "" 。预期 - 文本值

javascript - button.value 返回 "" 。预期 - 文本值

问题描述

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

       <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);
    })
});

标签： javascriptdom-events

解决方案

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

   <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);
    })
});

推荐阅读