JavaScript中事件监器重赋值全局变量出现undefined问题求助

• 你定义的playRound函数里有个humanChoice参数，这个参数会遮蔽全局的humanChoice变量——函数内部优先使用参数，而你调用playRound()时没传这个参数，所以参数humanChoice是undefined，自然不会用到你赋值的全局变量。
• 另外你调用playRound()时也没传computerChoice，这个参数同样是undefined，后续判断逻辑也会失效。

给你两种可行的修复方式：

方式1：移除函数参数，直接用全局变量 #

适合简单场景，同时补充电脑选择的生成逻辑和分数变量定义：

let humanChoice;
// 先定义分数变量，避免报错
let humanScore = 0;
let computerScore = 0;

rock.addEventListener('click', () => {
    humanChoice = "rock";
    playRound();
});

// 生成随机的电脑选择
function getComputerChoice() {
    const choices = ["rock", "paper", "scissors"];
    return choices[Math.floor(Math.random() * choices.length)];
}

// 移除humanChoice参数，直接用全局变量
function playRound() {
    const computerChoice = getComputerChoice();

    if (humanChoice === computerChoice) {
        console.log("It's a tie! There is no winner this round.")
    } else if (humanChoice === "rock" && computerChoice === "paper") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "rock" && computerChoice === "scissors") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "paper" && computerChoice === "rock") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "paper" && computerChoice === "scissors") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "scissors" && computerChoice === "paper") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "scissors" && computerChoice === "rock") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    }
}

方式2：调用时直接传参，减少全局依赖 #

更推荐这种方式，代码逻辑更清晰，避免全局变量污染：

// 定义分数变量
let humanScore = 0;
let computerScore = 0;

rock.addEventListener('click', () => {
    // 点击时直接把选择传给playRound
    playRound("rock");
});

// 生成随机的电脑选择
function getComputerChoice() {
    const choices = ["rock", "paper", "scissors"];
    return choices[Math.floor(Math.random() * choices.length)];
}

// 保留humanChoice参数，调用时传入
function playRound(humanChoice) {
    const computerChoice = getComputerChoice();

    if (humanChoice === computerChoice) {
        console.log("It's a tie! There is no winner this round.")
    } else if (humanChoice === "rock" && computerChoice === "paper") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "rock" && computerChoice === "scissors") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "paper" && computerChoice === "rock") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "paper" && computerChoice === "scissors") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "scissors" && computerChoice === "paper") {
        humanScore++
        console.log("You win! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    } else if (humanChoice === "scissors" && computerChoice === "rock") {
        computerScore++
        console.log("You lose! Your score is " + humanScore + " and the computer's score is " + computerScore + ".")
    }
}

原代码里humanScore和computerScore没有声明，运行时会直接报错，上面的两种方案都补充了这两个变量的定义，记得加上。

内容的提问来源于stack exchange，提问作者Casey Morgan