addEventListener 只工作一次[关闭]答案

【问题标题】：addEventListener works only one time [closed]addEventListener 只工作一次[关闭]
【发布时间】：2021-04-21 13:42:18
【问题描述】：

我对编程很陌生，我正在尝试使用 Javascript 制作石头剪刀布，但遇到了这个问题。每当我单击岩石图像时，它应该会生成一个介于 0 和 2 之间的随机数，如果数字为 0，则为平局，如果为 1，则玩家输，如果为 2，则玩家获胜。但是当我运行此代码时，它仅在数字为 0 时才有效。因此，当我单击按钮时，如果数字为 0，则显示“它是平局”，但如果不是 0，则不显示任何内容。但是当我再次尝试点击时，它不起作用。我必须刷新页面再试一次。谁能帮助我，如果我没有正确解释这一点，请见谅。

HTML：





<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
        
    </head>
    <title> Rock Paper Scissors! </title>
    <body>
        <div id="rpsGame">
        <h1 id="RPS"> Rock, paper, scissors! </h1>
          <div id="score">
        <p id="myScore">0</p>
        <p>:</p>
        <p id="botScore">0</p>
          </div>
        <img src="rock.png" id="rock">
        <img src="paper.png" id="paper">
        <img src="scissors.png" id="scissors">
        <p id="winOrLose"></p>
        </div>
    </body>
</html>

Javascript：





   var randomNumber = Math.floor(Math.random() * 3)
            var rockChoice = document.getElementById('rock');
            var botAnswer = document.getElementById('winOrLose')

         rockChoice.addEventListener('click', function() {
             if (randomNumber == 0) {
                 botAnswer.textContent = "Bot picked rock, you tie!"
             
               if (randomNumber == 1) {
                  botAnswer.textContent = "Bot picked paper, you lose!"
             

            if (randomNumber == 2) {
                  botAnswer.textContent = "Bot picked scissors, you lose!"
             }
         }
    }
         });

CSS：




body {
    background-color:#2a303d;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#rock {
    width: 80%;
    position: absolute;
    top: 45.8%;
    left: 39.75%;
    transform: translate(-50%, -50%);
    transform: rotate(360deg);
    height: 100px;
    width: 100px
}

#paper {
    width: 80%;
    position: absolute;
    top: 45.8%;
    left: 46.75%;
    transform: translate(-50%, -50%);
    transform: rotate(360deg);
    height: 100px;
    width: 100px;
}

#scissors {
    width: 80%;
    position: absolute;
    top: 52.05%;
    left: 57.25%;
    transform: translate(-50%, -50%); 
    height: 100px;
    width: 100px;
}

#RPS {
    font-size: 65px;
    margin-top: 40px;
}

#botPick {
    font-size: 50px;
    margin-top: 350px;
}

#Score p {
    margin:0;
    padding:0;
    margin-left: 5px;
    font-size: 36px;
    display: inline-block;
    line-height: 80px;
    vertical-align: top;
}

#winOrLose {
    color: white;
}

【问题讨论】：

你正在嵌套你的 ifs，所以代码只对第一个 ===0 作出反应，没有其他反应，将其他人移到第一个 if 之外，请了解 esle if 的工作原理：@ 987654321@
哦，哇，我很笨。我其实不是故意的，但是谢谢。现在唯一的问题是我必须刷新页面并再次单击按钮才能再次执行此操作。如果我再次点击它而不刷新它就不会工作。
在第一个 if 之前将您的随机数声明移动到 click EventListener 中，因此每次单击时都会生成新的随机数，就像您现在拥有的方式一样，它会在加载时生成一次并保持不变.
不错！非常感谢。它奏效了。
作为旁注：读入switch statement。 In 消耗的资源少于在您的案例中优化代码的 if 语句。

标签： javascript html css dom-events addeventlistener

【解决方案1】：

var randomNumber = Math.floor(Math.random() * 3)
var rockChoice = document.getElementById('rock');
var botAnswer = document.getElementById('winOrLose')
var botScore = document.getElementById('botScore')

rockChoice.addEventListener('click', function() {
  randomNumber = Math.floor(Math.random() * 3)
  botScore.innerHTML = randomNumber;
  if (randomNumber == 0) {
    botAnswer.textContent = "Bot picked rock, you tie!"
  } // close this here
  if (randomNumber == 1) {
    botAnswer.textContent = "Bot picked paper, you lose!"
  } // and this here

  if (randomNumber == 2) {
    botAnswer.textContent = "Bot picked scissors, you lose!"
  }
});

body {
  background-color: #2a303d;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#rock {
  height: 100px;
  width: 100px
}

#paper {
  height: 100px;
  width: 100px;
}

#scissors {
  height: 100px;
  width: 100px;
}

#RPS {
  font-size: 65px;
  margin-top: 40px;
}

#botPick {
  font-size: 50px;
  margin-top: 350px;
}

#Score p {
  margin: 0;
  padding: 0;
  margin-left: 5px;
  font-size: 36px;
  display: inline-block;
  line-height: 80px;
  vertical-align: top;
}

#winOrLose {
  color: white;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

</head>
<title> Rock Paper Scissors! </title>

<body>
  <div id="rpsGame">
    <h1 id="RPS"> Rock, paper, scissors! </h1>
    <div id="score">
      <p id="myScore">0</p>
      <p>:</p>
      <p id="botScore">0</p>
    </div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIrN1IJ0Q4tKqrKg3f02_PIpFbHHAm-Ri5pA&usqp=CAU" alt="rock" id="rock">
    <img src="https://png.pngtree.com/png-vector/20201020/ourmid/pngtree-a-torn-note-paper-png-image_2369714.jpg" id="paper">
    <img src="https://png.pngtree.com/png-clipart/20190918/ourmid/pngtree-scissors-2764712-png-image_1733940.jpg" id="scissors">
    <p id="winOrLose"></p>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我认为您想要实现类似下面的演示。详情见js中的cmets：

var botAnswer = document.getElementById('winOrLose')
var playerScoreEl = document.getElementById('myScore');
var botScoreEl = document.getElementById('botScore');
var choices = ['Rock', 'Paper', 'Scissors'];

//Add a click event listener on the parent element and then check which option was selected by the user by inspecting the `event` argument provided to the handler function
document.getElementById('option-container').addEventListener('click', function(event) {
  if (event.target.tagName === 'IMG') {
    var playerChoice = event.target.alt;
    var botChoice = choices[Math.floor(Math.random() * 3)];
    var playerWonRound = false;
    var isTie = false;

    //Compare the bot choice with the player's choice
    switch (botChoice) {
      case playerChoice:
        isTie = true;
        break;
      case 'Rock':
        if (playerChoice === 'Paper') {
          playerWonRound = true;
        }
        break;
      case 'Paper':
        if (playerChoice === 'Scissors') {
          playerWonRound = true;
        }
        break;
      case 'Scissors':
        if (playerChoice === 'Rock') {
          playerWonRound = true;
        }
        break;
    }

    if (isTie) {
      botAnswer.innerHTML = `Bot picked: ${botChoice} - tie!`;
      return;
    }

    //Update the score on the UI
    if (playerWonRound) {
      playerScoreEl.innerHTML = parseInt(playerScoreEl.innerHTML) + 1;
    } else {
      botScoreEl.innerHTML = parseInt(botScoreEl.innerHTML) + 1;
    }

    //Update the round message on the UI
    botAnswer.innerHTML = `Bot picked: ${botChoice} - you ${playerWonRound ? 'win' : 'lose'}!`;
  }
});

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

</head>
<title> Rock Paper Scissors! </title>

<body>
  <div id="rpsGame">
    <h1 id="RPS"> Rock, paper, scissors! </h1>
    <div id="score">
      <span id="myScore">0</span>:
      <span id="botScore">0</span>
    </div>
    <div id="option-container">
      <img src="rock.png" id="rock" alt="Rock">
      <img src="paper.png" id="paper" alt="Paper">
      <img src="scissors.png" id="scissors" alt="Scissors">
    </div>
    <p id="winOrLose"></p>
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

这给了我一些时间来修复您的代码。请注意，我没有用分数更新 DOM。我没有使用 DOM，而是使用console.log()

所以请不要忘记在测试此代码时检查浏览器中的控制台。

var randomNumber = Math.floor(Math.random() * 3);

var myScore = 0;
var botScore = 0;

var myScoreElement = document.getElementById("myScore");
var botScoreElement = document.getElementById("botScore");

console.log(randomNumber);

//assign your defalut choose between 0 - 3
var rockChoiceNumber = 0;
var paperChoiceNumber = 1;
var scissorsChoiceNumber = 2;

var rockChoice = document.getElementById("rock");
var paperChoice = document.getElementById("paper");
var scissorsChoice = document.getElementById("scissors");
var botAnswer = document.getElementById("winOrLose");

rockChoice.addEventListener("click", function() {
  if (rockChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked rock, you tie!";
    myScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (paperChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked paper, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (scissorsChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked scissors, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
});

paperChoice.addEventListener("click", function() {
  if (rockChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked rock, you tie!";
    myScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (paperChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked paper, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (scissorsChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked scissors, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
});

scissorsChoice.addEventListener("click", function() {
  if (rockChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked rock, you tie!";
    myScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (paperChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked paper, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
  if (scissorsChoiceNumber == randomNumber) {
    botAnswer.textContent = "Bot picked scissors, you lose!";
    botScore++;
    console.log("My Score: " + myScore);
    console.log("Bot Score: " + botScore);
    randomNumber = Math.floor(Math.random() * 3);
  }
});

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

</head>
<title> Rock Paper Scissors! </title>

<body>
  <div id="rpsGame">
    <h1 id="RPS"> Rock, paper, scissors! </h1>

    <img src="https://picsum.photos/200" id="rock">
    <img src="https://picsum.photos/200" id="paper">
    <img src="https://picsum.photos/200" id="scissors">
    <br>
    <div id="score">
      <p id="myScore">0</p>
      :
      <p id="botScore">0</p>
    </div>
    <p id="winOrLose"></p>
  </div>
</body>

</html>

【讨论】：

请重新阅读问题所在。这不是关于分数的可能问题。而且你添加了很多没有被要求的 JS 行。