addEventListener 只工作一次

Question

我是编程新手，我正在尝试使用 Javascript 制作剪刀石头布，我运行解决了这个问题。每当我单击岩石图像时，它应该生成一个介于 0 和 2 之间的运行dom 数字，如果数字为 0，则为平局，如果为 1，则玩家输，如果为 2，则玩家获胜。但是当我运行此代码仅在数字为 0 时才有效。所以当我单击按钮时，如果数字为 0，它会显示 'its a tie' 但如果它不是 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;
}

Answer 1

它给了我一些时间来修复你的代码。请注意，我没有用分数更新 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>

Answer 2

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>

Answer 3

我想你想要实现类似下面的演示的东西。详见js中的评论：

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>

addEventListener 只工作一次

addEventListener works only one time

html

javascript

css

addeventlistener

dom-events