Fatal编程技术网
  • javascript/
  • Javascript 函数onclick事件侦听器，它使用函数中已单击按钮的id

Javascript 函数onclick事件侦听器，它使用函数中已单击按钮的id

javascript function

Javascript 函数onclick事件侦听器，它使用函数中已单击按钮的id,javascript,function,this,addeventlistener,Javascript,Function,This,Addeventlistener,我目前正在做一个石头剪纸代码，这是寻求增加1。按钮的事件侦听器 2.运行game（）函数时，将选定按钮用作playerSelection 3.警惕结果 我还没有开始处理score iterations++部分，但是我无法得到提醒的结果。我研究并发现了这个id，并使用了一些我被指向的教程来选择所有按钮，但我遇到了障碍。任何帮助都将不胜感激！多谢各位 <!DOCTYPE html> <html lang="en"> <head> &l

我目前正在做一个石头剪纸代码，这是寻求增加1。按钮的事件侦听器 2.运行game（）函数时，将选定按钮用作playerSelection 3.警惕结果

我还没有开始处理score iterations++部分，但是我无法得到提醒的结果。我研究并发现了这个id，并使用了一些我被指向的教程来选择所有按钮，但我遇到了障碍。任何帮助都将不胜感激！多谢各位

   <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title></title>
    </head>
     <body>
      <div id="container">
    <button id="rock">Rock</button>
    <button id="paper">Paper</button>
    <button id="scissors">Scissors</button>
    </div>

    <script>


    let pScore = 0
    let cScore = 0
    let ties = 0

     // buttons is a node list. It looks and acts much like an array.
     const buttons = document.querySelectorAll('button');

     // we use the .forEach method to iterate through each button
     buttons.forEach((button) => {

     // and for each one we add a 'click' listener
     button.addEventListener('click', (e) => {

      function game() {
      let playerSelection = this.id;
      let computerSelection = computerPlay();
      return playRound(playerSelection, computerSelection);

        function computerPlay() {
          let cChoices = ["Rock", "Paper", "Scissors"];
          let cThrow = Math.floor(Math.random()* 3);
          return cChoices[cThrow].toLowerCase();;
        }

        function playRound() {
        alert("Player picked " + playerSelection);
        alert("Computer selected " + computerSelection)
        if (playerSelection === computerSelection) {
          alert("Tie game, move on to the next round and play again");
          ties++
      } else if (playerSelection == "rock" && computerSelection == "paper"){
              alert("You lose...what a wimp");
              cScore++;

      } else if (playerSelection == "rock" && computerSelection ==        
              "scissors"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "paper" && computerSelection == "rock"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "paper" && computerSelection == 
      "scissors"){
              alert("You lose...what a wimp");
              cScore++;

      } else if (playerSelection == "scissors" && computerSelection == 
       "paper"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "scissors" && computerSelection == 
        "rock"){
              alert("You lose...what a wimp");

      } else {
        alert("something has gone terribly wrong");
      }
      alert("Player score is " + pScore, "Computer score is " + cScore, "Ties 
      = " + ties)

       }
      }
      });
     });

     </script>
       </body>
       </html>


摇滚乐
纸张
剪刀
设pScore=0
设cScore=0
设ties=0
//按钮是一个节点列表。它看起来和行为都很像一个数组。
const buttons=document.queryselectoral（'button'）；
//我们使用.forEach方法迭代每个按钮
按钮。forEach（（按钮）=>{
//对于每一个，我们都会添加一个“点击”侦听器
按钮。addEventListener（'单击'，（e）=>{
函数游戏（）{
让playerSelection=this.id；
让计算机选择=计算机播放（）；
返回游戏轮（玩家选择、计算机选择）；
函数computerPlay（）{
让C选项=[“石头”、“布”、“剪刀”]；
设cThrow=Math.floor（Math.random（）*3）；
返回cChoices[cThrow].toLowerCase（）；；
}
函数playRound（）{
警惕（“玩家选择”+玩家选择）；
警报（“选择的计算机”+选择的计算机）
如果（playerSelection==计算机选择）{
警惕（“平局，进入下一轮，再次比赛”）；
领带++
}否则如果（playerSelection==“rock”和&computerSelection==“paper”）{
警惕（“你输了……真是个懦夫”）；
cScore++；
}否则如果（playerSelection==“rock”&&computerSelection==
“剪刀”）{
警惕（“你赢了，出色的工作！”）；
pScore++；
}否则如果（playerSelection==“纸张”和&computerSelection==“岩石”）{
警惕（“你赢了，出色的工作！”）；
pScore++；
}否则如果（playerSelection==“纸张”和&computerSelection==
“剪刀”）{
警惕（“你输了……真是个懦夫”）；
cScore++；
}否则如果（playerSelection==“剪刀”&&computerSelection==
“文件”）{
警惕（“你赢了，出色的工作！”）；
pScore++；
}否则如果（playerSelection==“剪刀”&&computerSelection==
“岩石”）{
警惕（“你输了……真是个懦夫”）；
}否则{
警惕（“出了严重的问题”）；
}
警惕（“玩家分数为“+pScore”，电脑分数为“+cScore”，平分
=“+领带）
}
}
});
});
问题是您在
按钮.addEventListener（）中使用了一个箭头函数。箭头函数从创建它们的作用域中获取
此
，因此它不包含您单击的元素

您可以使用
事件.目标
或
按钮
代替
此
，例如：


let playerSelection = button.id;


或

也可以将箭头功能更改为传统功能：


button.addEventListener("click", function(event) {
    ...
});



另一个建议是：与其传递ID，不如传递元素本身。这样，当您想对元素执行某些操作时，就不必到处调用
document.getElementById（）
。
Barmar，感谢您的响应。我有一个后续信息要告诉你（在学习阶段，所以如果它需要一秒钟才能进入我的大脑，我很抱歉）“问题是你正在为事件侦听器使用箭头函数。”是for.each.button箭头函数还是事件侦听器箭头函数。。。event.target和button：这会用作播放器选择还是代替箭头函数（带或不带括号），以及对传统函数的更改：我会用function（）替换箭头？所有这些都说明了…剩下的代码是否清晰？这是
按钮中的箭头函数。addEventListener
。我已经更新了答案来澄清其余的问题。非常感谢Barmar。这与更多的研究相结合，我使其功能化了！

button.addEventListener("click", function(event) {
    ...
});