当前位置： 文江博客话题详情

使用 html & 重新启动按钮js

发布于 2025-01-14 05:19:33 字数 2719 浏览 1 评论 0原文

如何在此游戏上添加重新启动按钮，以便每次用户单击该按钮时都会重新启动游戏。尝试了几种方法来做到这一点，但我认为我很愚蠢，哈哈，只是无法弄清楚。 有人知道该怎么做吗？

如何在此游戏上添加重新启动按钮，以便每次用户单击该按钮时都会重新启动游戏。尝试了几种方法来做到这一点，但我认为我很愚蠢，哈哈，只是无法弄清楚。 有人知道该怎么做吗？

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 = "";
};
原文

How do you add a restart button on this game so that every time user click on the button it restart the game. Tried few ways to do it but i think i am dumb lol, just cant figure it out.
Anyone knows how to do that ?

How do you add a restart button on this game so that every time user click on the button it restart the game. Tried few ways to do it but i think i am dumb lol, just cant figure it out.
Anyone knows how to do that ?

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 = "";
};

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

久随 2025-01-21 05:19:34

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

<!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>

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

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

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

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

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

而不是

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

如果您想要一个“重新启动按钮”，那么您可以使用文本“Re- Start”添加一个类，使其在视觉上更像一个按钮，或者只是使用

I edited as little as possible of your code :

<!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>

So basically, if you want to click the text "Re-Start" and having it "reset the game", you have to remove the text at three places : the computer's choice, your choice, and the result.

The function your wrote for it doesn't change any of those. Instead, it looks for a DOM element with the id "number", which doesn't seem to even exists.

The DOM elements you want to change have IDs "computer-choice", "user-choice" and "result".

Beside, you're trying to add a click event toward your reset function to an element with the id "reset". But it doesn't exists. You can change that by adding that ID to the text which you seem to be willing to use in that case :

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

instead of

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

And if you want to have a "restart button", then you may either edit the div with the text "Re-Start" to add a class which makes it more of a button visually speaking, or just use

回复 原文
~没有更多了~

关于作者

顾忌

暂无简介

文章
评论
271 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文