我是一名 JavaScript 初学者，正在学习 YouTube 的在线课程。 https://www.youtube.com/watch?v=EerdGm-ehJQ&t=9176s (03:19:00)
我正在使用 Math.random 制作石头剪刀布游戏。但是，VS Code 会发出以下警报消息：
谁能解释为什么会发生这种情况以及解决方案是什么？ 代码如下。
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
</head>
<body>
<p>Rock Paper Scissors</p>
<button
onclick="
const randomNumber = Math.random();
let computerMove = '';
if (randomNumber >= 0 && randomNumber < 1 / 3 )
{
computerMove = 'rock';
}
else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 )
{
computerMove = 'paper';
}
else if (randomNumber >= 2 / 3 && randomNumber < 1 )
{
computerMove = 'scissors';
}
let result = '';
if (computerMove === 'rock'){
result = 'Tie.';
} else if (computerMove === 'paper' ) {
result = 'Lost.';
} else if (computerMove === 'scissors' ) {
result = 'You win.';
}
alert (` You picked rock. Computer picked ${computerMove}. ${result}.`)
"
>
Rock
</button>
<button
onclick="
const randomNumber2 = Math.random();
let computerMove = '';
if (randomNumber2 >= 0 && randomNumber2 < 1 / 3 )
{
computerMove2 = 'rock';
}
else if (randomNumber2 >= 1 / 3 && randomNumber2 < 2 / 3 )
{
computerMove2 = 'paper';
}
else if (randomNumber2 >= 2 / 3 && randomNumber2 < 1 )
{
computerMove2 = 'scissors';
}
let result2 = '';
if (computerMove2 === 'rock'){
resul2 = 'You win.';
} else if (computerMove2 === 'paper' ) {
result2 = 'Tie.';
} else if (computerMove2 === 'scissors' ) {
result2 = 'You lose.';
}
alert (` You picked paper. Computer picked ${computerMove2}. ${result2}.`)
"
>
Paper
</button>
<button
onclick="
const randomNumber = Math.random();
let computerMove = '';
if (randomNumber >= 0 && randomNumber < 1 / 3 )
{
computerMove = 'rock';
}
else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 )
{
computerMove = 'paper';
}
else if (randomNumber >= 2 / 3 && randomNumber < 1 )
{
computerMove = 'scissors';
}
let result = '';
if (computerMove === 'rock'){
result = 'You lose.';
} else if (computerMove === 'paper' ) {
result = 'You win.';
} else if (computerMove === 'scissors' ) {
result = 'Tie.';
}
alert (` You picked scissors. Computer picked ${computerMove}. ${result}.`);
"
>
Scissors
</button>
<script></script>
</body>
</html>
问题在于浏览器如何解释内联事件处理程序。
所有内联事件处理程序共享相同的全局范围（浏览器中的窗口对象）。这意味着在任何内联处理程序中使用
varletconst用
letconstblock {}但是，在内联事件处理程序的上下文中，每个处理程序在其自己的块中并不是隔离的。相反，它们被视为同一总体脚本的一部分，共享全局范围。
您的代码最终定义与此类似的范围，因此出现错误：
{
const randomNumber = Math.random();
const randomNumber2 = Math.random();
const randomNumber = Math.random();
}
简单的解决方案：为每个处理程序声明唯一的变量。
但是，除非说明以下内容，否则答案将不完整。 我强烈建议您避免像您那样实现内联处理程序，除非出于教育目的。通常，您希望将实现分离到单独的 javascript 脚本中，如下所示：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
</head>
<body>
<h1>Rock Paper Scissors</h1>
<button id="rockButton">Rock</button>
<button id="paperButton">Paper</button>
<button id="scissorsButton">Scissors</button>
<script src="script.js"></script>
</body>
</html>
script.js
// Function to determine computer's move
function getComputerMove() {
const randomNumber = Math.random();
if (randomNumber < 1 / 3) return 'rock';
if (randomNumber < 2 / 3) return 'paper';
return 'scissors';
}
// Function to determine the result
function determineResult(playerMove, computerMove) {
if (playerMove === computerMove) return 'Tie.';
if (
(playerMove === 'rock' && computerMove === 'scissors') ||
(playerMove === 'paper' && computerMove === 'rock') ||
(playerMove === 'scissors' && computerMove === 'paper')
) {
return 'You win!';
}
return 'You lose.';
}
// Event handler for player's move
function handlePlayerMove(playerMove) {
const computerMove = getComputerMove();
const result = determineResult(playerMove, computerMove);
alert(`You picked ${playerMove}. Computer picked ${computerMove}. ${result}`);
}
// Attach event listeners to buttons
document.getElementById('rockButton').addEventListener('click', () => handlePlayerMove('rock'));
document.getElementById('paperButton').addEventListener('click', () => handlePlayerMove('paper'));
document.getElementById('scissorsButton').addEventListener('click', () => handlePlayerMove('scissors'));