如何在JavaScript中将按钮textContent作为玩家输入参数传入游戏函数？

问题描述 #

我正在把原本控制台运行、用prompt获取输入的石头剪刀布游戏改成带UI的版本。已经做了rock、paper、scissors三个按钮，加了点击事件监听器，在事件里把button.textContent赋值给buttonText，全局也声明了空的buttonText变量。现在在接收computerSelection和playerSelection参数的playRound函数里，我把buttonText赋值给playerSelection，但不确定这么写对不对，是不是调用方式有问题，或者要不要重新设计playerSelection的赋值逻辑。目前已经注释了五轮游戏的代码，等核心功能正常再恢复。

现有代码 #

JavaScript代码 #

// DECLARES THE CHOICES FOR ANSWERS, PLAYER SCORE, COMPUTER SCORE, AND SETS BOTH SCORES TO 0.
const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;
let computerScore = 0;

// FUNCTION TO RANDOMIZE THE ANSWER FOR computerSelection.
function computerPlay() {
    return choices[~~(Math.random() * choices.length)]
} 

// DECLARES VARIABLE FOR BUTTONTEXT, PLAYER SELECTION, AND COMPUTER SELECTION IN THE GLOBAL SCOPE.
let buttonText = '';
let playerSelection = '';
let computerSelection = computerPlay();

// FUNCTION THAT PLAYS A ROUND, CHECKS ANSWERS TO SEE WHO WON THE ROUND, AND RETURNS A MESSAGE-
// -STATING WHO WON THE ROUND.
function playRound(playerSelection, computerSelection) {
    // playerSelection = prompt('rock, paper, or scissors?').toLowerCase();
    playerSelection = buttonText;
    computerSelection = computerPlay();

    if (playerSelection === computerSelection) {
        return 'you tied';
    } else if (computerSelection === 'paper' && playerSelection === 'rock') {
        computerScore++;
        return 'you lose, paper beats rock! ):';
    } else if (computerSelection === 'scissors' && playerSelection === 'paper') {
        computerScore++;
        return 'you lose, scissors beats paper! ):';
    } else if (computerSelection === 'rock' && playerSelection === 'scissors') {
        computerScore++;
        return 'you lose, rock beats scissors! ):';
    } else if (computerSelection === 'rock' && playerSelection === 'paper') {
        playerScore++;
        return 'you win, paper beats rock! (:';
    } else if (computerSelection === 'paper' && playerSelection === 'scissors') {
        playerScore++;
        return 'you win, scissors beats paper! (:';
    } else if (computerSelection === 'scissors' && playerSelection === 'rock') {
        playerScore++;
        return 'you win, rock beats scissors! (:';
    } else {
        return 'that\'s not an acceptable answer!'
    }
}

const buttons = document.querySelectorAll('button');

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        let buttonText = button.textContent;
        console.log(buttonText);
    })
})

// LOGIC THAT PLAYS 5 ROUNDS OF THE GAME
// function game() {
//     console.log(playRound(playerSelection, computerSelection));
//     if (playerScore < 5 && computerScore < 5) {
//         game();
//      } else {
//          endGame();
//      }
// }


// FUNCTION THAT ENDS THE GAME AND DECLARES THE WINNER
// function endGame() {
//     if (playerScore > computerScore) {
//     console.log('you win! (:') 
//     } else if (computerScore > playerScore) {
//     console.log('you lose! ):');
//     }
// }

// console.log(buttonText);

playRound(playerSelection, computerSelection);
console.log(playRound(playerSelection, computerSelection));

// CALLS THE FUNCTION TO PLAY THE GAME
// game();

HTML代码 #

<body>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>

    <script src="index.js"></script>
</body>

核心问题分析 #

• 变量作用域错误：点击事件里的buttonText是局部变量，和全局的buttonText不是同一个，导致playRound始终拿不到玩家点击的选择。
• 函数参数冗余：playRound函数的参数playerSelection和computerSelection完全没用到，函数内部直接重新赋值，参数失去意义。
• 触发时机错误：页面加载时就调用了playRound，此时玩家还没点击按钮，必然拿不到有效输入。
• 全局变量冗余：playerSelection、computerSelection等全局变量没必要存在，增加了代码复杂度。

修改方案及优化代码 #

修改后的JavaScript代码 #

const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;
let computerScore = 0;

// 生成电脑随机选择
function computerPlay() {
    return choices[~~(Math.random() * choices.length)];
} 

// 单轮游戏逻辑，仅接收玩家选择作为参数
function playRound(playerSelection) {
    const computerSelection = computerPlay();

    if (playerSelection === computerSelection) {
        return '平局！';
    } else if (computerSelection === 'paper' && playerSelection === 'rock') {
        computerScore++;
        return '你输了，纸包石头！):';
    } else if (computerSelection === 'scissors' && playerSelection === 'paper') {
        computerScore++;
        return '你输了，剪刀剪纸！):';
    } else if (computerSelection === 'rock' && playerSelection === 'scissors') {
        computerScore++;
        return '你输了，石头砸剪刀！):';
    } else if (computerSelection === 'rock' && playerSelection === 'paper') {
        playerScore++;
        return '你赢了，纸包石头！(: ';
    } else if (computerSelection === 'paper' && playerSelection === 'scissors') {
        playerScore++;
        return '你赢了，剪刀剪纸！(: ';
    } else if (computerSelection === 'scissors' && playerSelection === 'rock') {
        playerScore++;
        return '你赢了，石头砸剪刀！(: ';
    } else {
        return '无效输入！';
    }
}

// 按钮点击事件处理
const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', () => {
        // 获取玩家选择并转为小写，避免大小写问题
        const playerChoice = button.textContent.toLowerCase();
        // 调用单轮游戏逻辑并获取结果
        const roundResult = playRound(playerChoice);
        // 打印结果和当前分数
        console.log(roundResult);
        console.log(`当前分数：玩家 ${playerScore} - ${computerScore} 电脑`);
        
        // 后续可恢复五轮游戏逻辑，比如判断是否达到5分结束游戏
        // if (playerScore >=5 || computerScore >=5) {
        //     endGame();
        // }
    });
});

// 游戏结束逻辑（可按需启用）
// function endGame() {
//     const finalResult = playerScore > computerScore ? '你赢了全局游戏！(: ' : '你输了全局游戏！):';
//     console.log(finalResult);
//     // 可重置分数或添加其他结束逻辑
// }

修改要点说明 #

1. 修复作用域问题：去掉点击事件里的let，直接获取按钮文本作为参数传给playRound，不再依赖全局变量传递值。
2. 简化函数参数：playRound仅接收玩家选择，电脑选择在函数内部生成，避免参数冗余。
3. 调整触发时机：只有玩家点击按钮时才调用playRound，符合交互逻辑。
4. 优化全局变量：删除不必要的全局变量，降低代码复杂度。
5. 增加鲁棒性：将按钮文本转为小写，避免因按钮文本大小写不一致导致的判断错误。

内容的提问来源于stack exchange，提问作者Daniel M.