如何实现玩家1按下1/2/3键时更改choose1元素的文本内容？

问题描述 #

开发双人对战游戏时，期望实现：当玩家1按下1、2、3任意一键时，将页面中id为choose1的<h2>元素文本从"Player 1 Selected:"修改为"player one has chosen"，但该功能未生效。相关代码如下：

HTML片段 #

<div class="row">
    <div class="col-md-offset-2 col-md-8">
        <div class="jumbotron multiGame">
            <h2 id="choose1">Player 1 Selected: <span style="color: #eee;" id="player1"></span></h2>
            <h2>Player 2 selected <span id="player2"></span></h2>
            <h2 id="roundScore"></h2>
            <div class="messageBox"></div>
        </div>
    </div>
</div>

原JavaScript代码 #

document.onkeyup = function(event) {
    console.log($(".lock").text());
    console.log($(".round").text());
    if($(".lock").text() === $(".round").text()){
        switch(event.key){
            case '1':
                userText.textContent = 'rock';
            break;
            case '2':
                userText.textContent = 'paper';
            break;
            case '3':
                userText.textContent = 'scissors';
            break;
        }
        var player1selection = document.getElementById("player1").innerText
        if(event.key ===  '1' || '2' || '3'){
            userSelection('player2');
            var player2selection = document.getElementById("player2").innerText;
            turn[0] = player1selection;
            turn[1] = player2selection;
            bestOfThree.push(turn);
            console.log(turn);
            score(player1selection, player2selection);
            trackScore();
            console.log();
            if(!(turn[0] === "") && !(turn[1] === "")){
                console.log('reset');
                var nextRound = $(".lock").text(Number($(".lock").text()) + 1);
                $(".messageBox").append("<button class='reset' >Start the next round?</button>");
                reset();
            }
        } 
    }  
}
};

问题排查 #

1. 核心功能缺失：原代码完全没有对choose1元素文本进行修改的逻辑，这是功能未生效的直接原因。
2. 变量未定义：userText变量未声明就直接使用，会触发报错，导致无法设置Player1的选择文本。
3. 条件判断逻辑错误：if(event.key === '1' || '2' || '3')写法不符合JS语法，该条件永远为true（因为'2'和'3'是真值），正确逻辑应为逐个判断按键值。
4. 语法错误：代码末尾多了一个闭合大括号}，会导致JS解析失败。

解决方案 #

修改后的JavaScript代码如下，已修复所有问题并实现需求功能：

// 提前获取需要操作的DOM元素，减少重复查询
const choose1El = document.getElementById('choose1');
const player1El = document.getElementById('player1');

document.onkeyup = function(event) {
    console.log($(".lock").text());
    console.log($(".round").text());
    
    if($(".lock").text() === $(".round").text()){
        let selectedValue = '';
        // 处理Player1的按键选择
        switch(event.key){
            case '1':
                selectedValue = 'rock';
                break;
            case '2':
                selectedValue = 'paper';
                break;
            case '3':
                selectedValue = 'scissors';
                break;
            default:
                // 非1/2/3按键直接退出，不执行后续逻辑
                return;
        }
        
        // 设置Player1的选择文本
        player1El.textContent = selectedValue;
        // 修改choose1的提示文本（若不需要显示选择内容，可改为纯"player one has chosen"）
        choose1El.textContent = `player one has chosen ${selectedValue}`;
        
        const player1selection = selectedValue;
        // 正确的按键判断逻辑
        if(['1','2','3'].includes(event.key)){
            userSelection('player2');
            const player2selection = document.getElementById("player2").innerText;
            turn[0] = player1selection;
            turn[1] = player2selection;
            bestOfThree.push(turn);
            console.log(turn);
            score(player1selection, player2selection);
            trackScore();
            
            if(turn[0] !== "" && turn[1] !== ""){
                console.log('reset');
                $(".lock").text(Number($(".lock").text()) + 1);
                $(".messageBox").append("<button class='reset' >Start the next round?</button>");
                reset();
            }
        } 
    }  
};

修改说明 #

• 提前获取choose1和player1元素，优化DOM操作性能。
• 在switch分支中统一处理选择值，同步更新player1的选择文本和choose1的提示文本。
• 修复条件判断逻辑，使用数组includes方法更简洁可靠。
• 移除多余的闭合大括号，修复语法错误。
• 添加default分支过滤非目标按键，避免无效逻辑执行。

内容的提问来源于stack exchange，提问作者Game Master