Question

如果这个问题的格式不正确，我深表歉意，这是我在 SO 上的第一篇文章，也是我第一个真正陷入困境的地方。

在下面的代码中，函数 playerChoice 和 computerChoice 应该返回“rock”、“paper”或“scissors”的值。但是每次我在控制台中登录它们时，它们都显示为未定义，我无法比较这两个选择。我需要这些值来继续开发网页，否则代码无法比较这些选择。我将在下面展示我尝试操作它们的地方（它们用 *** 标记：）

（因为剪刀和纸放在同一个地方，所以我只展示了我试图放置“岩石”值的位置。

非常感谢任何帮助。

// buttons to be manipulated
const newButton = document.getElementById('newGameButton'); 
const rockSelect = document.getElementById('rockPicture');
const paperSelect = document.getElementById('paperPicture');
const scissorSelect = document.getElementById('scissorPicture');

// image or text fields to be manipulated
const playerWeapon = document.getElementById('playerWep');
const compWeapon = document.getElementById('compWep');
const pWepLabel = document.querySelector('.playerWeaponLabel');
const compWepLabel = document.querySelector('.compWeaponLabel');
const roundResult = document.getElementById('roundResult');
const playerScore = document.getElementById('scoreplayer');
const compScore = document.getElementById('scoreComp');
const img = '';
const src = ''; 

// player onclick function

let playerChoice = '';

function playerPlay() {
    
    rockSelect.addEventListener('click', function(){

        *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***

        chooseRock();
        computerPlay();
        if (document.getElementById('imageP')) {
            (document.getElementById('imageP')).remove();
        }
        const img = document.createElement('img');
        img.className = 'rock';
        img.id = 'imageP';
        img.src = 'images/rock1.png';
        const src = document.getElementById('playerWep');
        src.appendChild(img);

        *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***

     
    })
    paperSelect.addEventListener('click', function(){
        choosePaper();
        computerPlay();
        if (document.getElementById('imageP')) {
            (document.getElementById('imageP')).remove();
        }
        const img = document.createElement('img');
        img.className = 'paper';
        img.id = 'imageP';
        img.src = 'images/paper1.png';
        const src = document.getElementById('playerWep');
        src.appendChild(img);

        
      
    })
    scissorSelect.addEventListener('click', function(){
        chooseScissors();
        computerPlay();
        if (document.getElementById('imageP')) {
            (document.getElementById('imageP')).remove();
        }
        const img = document.createElement('img');
        img.className = 'scissors';
        img.id = 'imageP';
        img.src = 'images/scissors1.png';
        const src = document.getElementById('playerWep');
        src.appendChild(img);
        
    })
    
    function chooseRock() {
        pWepLabel.innerHTML = 'Rock';

        *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***
    }
    function choosePaper() {
        pWepLabel.innerHTML = 'Paper';
        
    }
    function chooseScissors() {
        pWepLabel.innerHTML = 'Scissors';
        
    }

    return playerChoice;
    
}

Answer 1

chooseRock 和其他选择器应该填充一个内部变量来跟踪状态。我猜应该是playerChoice。因此，除了在您的 HTML 中显示它之外，还将其保存到您选择以跟踪选择的变量中。

computerPlay 函数未定义。

另一个建议：尝试将您的游戏逻辑与演示文稿分开。

变量总是返回 undefined

1 个答案: