当我点击网页上的按钮时，如何将该按钮的值作为函数的参数传递?

Question

我最近在做一个项目，是关于石头剪刀布游戏的。我遇到了一个问题，当我点击三个按钮中的一个(石头，布或剪刀)时，addEventListener确实工作，但我作为参数传递给事件侦听器的函数的实际参数之一"控制台说它是未定义的"。

我只是想在单击按钮时将该按钮的值传递给我正在谈论的这个参数。

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
// there are some functions
let computerSelection = computerPlay();
rock.addEventListener('click', function(){
playRound(playerSelection, computerSelection);
});
paper.addEventListener('click', function(){
playRound(playerSelection, computerSelection);});
scissors.addEventListener('click', function(){
playRound(playerSelection, computerSelection);});

<button class="rock">ROCK</button>
<button class="paper">PAPER</button>
<button class="scissors">SCISSORS</button>

Answer 1

您必须读取每个点击侦听器上的事件，您可以通过ev.target.value从事件中提取值:

anyButton.addEventListener('click', function(ev) { 
playRound(playerSelection, computerSelection, ev.target.value);
}

当然，这意味着你的按钮都有一个value属性集。

作为改进，您可以一次添加add事件侦听器，而无需遍历每个元素:

const allButtons = document.querySelectorAll('button') // adjust this per your DOM
allButtons.forEach((button) => {
button.addEventListener('click', function(ev) { 
playRound(playerSelection, computerSelection, ev.target.value);
})
})

Answer 2

你必须根据玩家点击的按钮传递playSelection:

rock.addEventListener('click', function(){
playRound('rock', computerSelection);
});
paper.addEventListener('click', function(){
playRound('paper', computerSelection);});
scissors.addEventListener('click', function(){
playRound('scissors', computerSelection);
});

但是我有一个建议，只有一个事件处理程序。首先，您必须在每个按钮中说明它代表的选择。使用data- attributes (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes):

)

<button class="rock choice-button" data-choice="rock">ROCK</button>
<button class="paper choice-button" data-choice="paper">PAPER</button>
<button class="scissors choice-button" data-choice="scissors">SCISSORS</button>

请注意，我为每个按钮添加了一个choice-button类，因此在添加事件时可以一次访问所有三个按钮:

// there are some functions
let computerSelection = computerPlay();
document.querySelectorAll('.choice-button')
.forEach(el => el.addEventListener('click', function(event) {
playRound(event.target.dataset.choice, computerSelection);
}));

首先，我使用querySelectorAll来查找与choice-button类匹配的所有元素，然后我使用forEach函数来遍历所有3个找到的按钮，并向所有这些按钮添加相同的事件侦听器。

一旦事件监听器被执行，我使用'event '。target'来访问被点击的按钮，并调用dataset属性来获取data-choice属性中定义的值。

我知道只有三个选择似乎有点开销，但既然你似乎在学习javascript，学习不同的方法可能会在更复杂的情况下帮助你，这很有趣。

Answer 3

undefined错误(一旦初始错误固定，还会出现两个错误)是由于引用未声明的函数引起的:

let computerSelection = computerPlay();
// computerPlay() is not defined;

如果您创建computerPlay()函数，错误将消失，但会出现一个新的错误，因为playRound()也没有定义。同样，如果函数被引用，则必须声明它(尽管在这种情况下，提升允许在调用之后声明它)。

修复后，最后一个错误出现在对playerSelection的引用中，同样，这没有被声明。假设playerSelection的值是石头、布或剪刀，您必须从点击事件中提取它。

事件处理程序需要提取事件的target的innerText属性值。在你的事件监听器中，你需要:

playerSelection = event.target.innerText;