如何获取被点击的按钮id，以便以后在不同的功能中重复使用？

Question

我想存储被点击的内容，以便在剪刀石头布游戏中多次使用。我需要使用它直到播放器或计算机得分为 5。任何建议将不胜感激！

HTML 文件:

<div class = buttons>
       <button id="rock">Rock</button>
       <button id="paper">Paper</button>
       <button id="scissors">Scissors</button>
   </div>

JavaScript 文件:

我可以记录 button.id 但是它没有用，因为我无法在任何其他功能中使用它。

const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', () => {
console.log(button.id)})); //get the button.id

# 更新 1

正如答案中指出的那样，我试图将它存储在一个数组中，

const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', () => {
      const {id} = button
      playerChoices.push(id)
      handleChoice(id)
    })
);

const handleChoice = id => {
    console.log(id)
    console.log(playerChoices)
  }

我想在这个函数 :game() 中使用它，但我无法调用 id 值，我也尝试 playerSelection = playerChoices[playerChoices.length - 1]; 获取数组的最后一个元素，但它错误为“未定义”每次都在这个函数中。

function game(){

let playerScore  = 0;
let computerScore  = 0;
    // playRound()
    // until player or computer scores 5
    while (playerScore < 5 && computerScore < 5) {
        const playerSelection = **UNDEFINED**;  
        const computerSelection = counterPlay();
        let roundResult = playRound(playerSelection, computerSelection);

        console.log(playRound(playerSelection, computerSelection));
        console.log("You chose: ", playerSelection, "Computer chose: " ,computerSelection);
        //incrementing the score:
        if(roundResult.search('You win') > -1){
            playerScore++;
        } else if (roundResult.search('You loose') > -1){
            computerScore++;
        }
        console.log("you : ",playerScore , "computer : " , computerScore);
        
        if(computerScore == 5){
            console.log("You lost :( I won");
        }
        else if(playerScore == 5){
            console.log("I lost, you're too good. Congrats on the win!")
        }       
    }
}

如何在每次点击时将 id 存储到 playerSelection？

Answer 1

您可以将其存储在数组中或将其传递给函数

像这样

let playerWins = 0
let computerWins = 0
const choices = ['Rock', 'Paper', 'Scissors']
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', () => {
  const {
    id
  } = button
  playMatch(id, Math.floor(Math.random() * choices.length))
}));

const startGame = () => {
  let playerWins = 0
  let computerWins = 0

}

const playMatch = (playerChoice, computerChoice) => {
  const result = (choices.length + playerChoice - computerChoice) % choices.length
  let message
  switch (result) {
    case 0:
      message = `it's a draw`
      break;
    case 1:
      message = `You won ${choices[playerChoice]} beats ${choices[computerChoice]}`
      playerWins++;
      break;
    default:
      message = `You lose ${choices[computerChoice]} beats ${choices[playerChoice]}`
      computerWins++;
  }
    console.log(message)
  if (Math.max(playerWins, computerWins) === 5) {
    alert('game ended')
  }
}

<div id="buttons">
  <button id="0">Rock</button>
  <button id="1">Paper</button>
  <button id="2">Scissors</button>
</div>
<div id="scores"></div>

Answer 2

var turns = [];
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', (event)=>{
   console.log(event.target.id);
   console.log(button.id);
   turns.push(button.id);
   console.log(turns);
}));

您缺少一个 ) 的 foreach 循环，然后 button.id 将始终使用浏览器控制台检查语法或脚本错误。

如何获取被点击的按钮id，以便以后在不同的功能中重复使用？

How to get the clicked button id to be used repeatedly later in different functions?

javascript

events

# 更新 1