使用 html 和 js 重新启动按钮

Question

如何在这个游戏上添加一个重新启动按钮，以便用户每次单击该按钮时都会重新启动游戏。尝试了几种方法来做到这一点，但我觉得我很笨哈哈，就是想不通。有人知道怎么做吗？

html    
----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors Tutorial</title>
  </head>
  <body>

    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>

    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <div class="restart">Re-Start</div>

    <script src="app.js" charset="utf-8"></script>
  </body>
</html>
--------
js file
---------
const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))

function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
  resultDisplay.innerHTML = result
}

document.getElementById("reset").onclick = function() {
  document.getElementById("number").innerHTML = "";
};

Answer 1

我尽可能少地编辑了您的代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors Tutorial</title>
  </head>
  <body>

    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>

    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <div class="restart" id="reset">Re-Start</div>

    
    
    <script>
    const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))

function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
  resultDisplay.innerHTML = result
}

document.getElementById("reset").onclick = function() {
  document.getElementById("computer-choice").innerHTML = "";
  document.getElementById("user-choice").innerHTML = "";
  document.getElementById("result").innerHTML = "";
  };
  </script>
    
  </body>
</html>

所以基本上，如果你想点击文本“Re-Start”并让它“重置游戏”，你必须删除三个地方的文本：计算机的选择，你的选择，以及结果。

您为其编写的函数不会改变任何这些。相反，它会查找 ID 为“number”的 DOM 元素，而该元素似乎根本不存在。

您要更改的 DOM 个元素的 ID 为“computer-choice”、“user-choice”和“result”。

此外，您正在尝试将针对重置功能的点击事件添加到 ID 为“重置”的元素。但它不存在。您可以通过将该 ID 添加到您似乎愿意在这种情况下使用的文本来更改它：

<div class="restart">Re-Start</div>

而不是

<div class="restart" id="reset">Re-Start</div>

如果你想有一个“重启按钮”，那么你可以用文本“Re-Start”编辑 div 来添加一个 class从视觉上来说是一个按钮，或者只使用

使用 html 和 js 重新启动按钮

Restart button using html & js

javascript

html

event-handling