如何获取分配给带有 textContent 的变量的内容，以作为 javascript 中我的播放器输入的参数？

Question

我目前正在开发一个 javascript 项目，在该项目中，我为我的石头、剪纸、剪刀游戏创建了一个 ui，该游戏目前仅在控制台中播放，并接受玩家输入作为提示。

到目前为止，我已经创建了三个按钮（一个用于石头、纸和剪刀）。 我已经为那些监听点击的按钮添加了一个事件监听器。 我还将该 button.textContent 分配给该事件侦听器 function 中的变量 buttonText。 在该事件侦听器 function 之外，我已经在全局 scope 中声明了变量 buttonText 并将其留空。 在寻找两个参数（computerSelection 和 playerSelection）的 playRound function 中，我已将 buttonText 分配给 playerSelection 参数。

我不确定我所做的是否正确，我只是没有调用我的游戏来正确运行，或者我是否需要重新考虑如何将我的 playerSelection 分配为我的 button.textContent 的输出。

我已经注释掉了我的部分代码，因为我当前的任务说“现在，删除恰好播放五轮的逻辑。” 直到我让我的核心 function 工作，然后再将其重新添加。

这是我的 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>

Answer 1

您可以使用 eventListener 中的event来了解单击了哪个按钮。

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

如何获取分配给带有 textContent 的变量的内容，以作为 javascript 中我的播放器输入的参数？

问题描述

1 个解决方案

解决方案1
1 2022-08-13 22:31:28

如何获取分配给带有 textContent 的变量的内容，以作为 javascript 中我的播放器输入的参数？

问题描述

1 个解决方案

解决方案1 1 2022-08-13 22:31:28

解决方案1
1 2022-08-13 22:31:28