Javascript与HTML不链接：石头剪刀布游戏

18 浏览
0 Comments

Javascript与HTML不链接：石头剪刀布游戏

我正在完成OdinProject上的任务，但是在石头剪刀布的作业上卡住了。游戏在浏览器上看起来没问题，但是JS文件中的指令似乎没有传递过来。

我尝试将文件移动到其他目录，重命名JS文件，并将源代码放在文件的多个部分中。我还使用了开发工具中的调试器。调试器显示“userChoice的重复声明”，在谷歌搜索这个错误时建议重新命名变量，但我不确定为什么如果这是第一次声明，就需要重新命名。

以下是HTML代码：

Rock Paper Scissors

Computer Choice:

Your Choice:

Result:

以下是JS代码：

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 getResult() {

if (computerChoice === userChoice) {

result = '平局！'

}

if (computerChoice === 'rock' && userChoice === "paper") {

result = '你赢了！'

}

if (computerChoice === 'rock' && userChoice === "scissors") {

result = '你输了！'

}

if (computerChoice === 'paper' && userChoice === "scissors") {

result = '你赢了！'

}

if (computerChoice === 'paper' && userChoice === "rock") {

result = '你输了！'

}

if (computerChoice === 'scissors' && userChoice === "rock") {

result = '你赢了！'

}

if (computerChoice === 'scissors' && userChoice === "paper") {

result = '你输了！'

}

resultDisplay.innerHTML = result

}

谢谢您的帮助！

0

1 答案

0 Comments

问题出现的原因是generateComputerChoice()函数未定义。解决方法是定义该函数，并在函数内部生成一个随机数来选择计算机的选择（rock、paper或scissors），然后将其赋值给变量computerChoice。

以下是可以尝试的generateComputerChoice()函数的代码：

function generateComputerChoice() {
  const choices = ["rock", "paper", "scissors"];
  const selection = Math.round(Math.random() * 2);
  computerChoice = choices[selection];
}

你可以点击下方的codepen链接查看完整的代码：

https://codepen.io/Labnan/pen/NWaEzQW

0