如何獲取分配給帶有 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