我是一名 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>
问题在于浏览器如何解释内联事件处理程序。
所有内联事件处理程序共享相同的全局范围(浏览器中的窗口对象)。这意味着在任何内联处理程序中使用
var
、let
或 const
声明的变量都是 全局上下文的一部分,除非明确指定作用域。
用
let
和 const
声明的变量是块作用域的,这意味着它们最好限制在定义它们的 block {}
中。
但是,在内联事件处理程序的上下文中,每个处理程序在其自己的块中并不是隔离的。相反,它们被视为同一总体脚本的一部分,共享全局范围。
您的代码最终定义与此类似的范围,因此出现错误:
{
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'));