我试图调用一个函数与一个特定的参数，当按钮被点击，但它只是不会工作。功能playRock和playRound工作时，在控制台测试，但不与事件监听器。请告诉我问题出在哪里，我花了8小时才把它修好。
这可能与我缺乏对回调函数如何工作的理解有关。我真的可以用一个例子来说明当按钮被按下时如何调用playRound('rock')函数。
我在网上找到的所有例子都是没有参数的函数或令人困惑的回调函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="rockbtn">Rock</button>
<button id="papertn">Paper</button>
<button id="scissorsbtn">Scissors</button>
<script>
// Call PlayRock upon clicking button #rockbtn
const rockbtn = document.querySelector('#rockbtn');
rockbtn.addEventListener('click', playRock);
// Call function playRound with propery 'rock'
function playRock() {
result = playRound('rock');
return result
}
// Randomly selects computer's choice out of rock, paper or scissors
function computerPlay() {
const choices = ['rock', 'paper', 'scissors'];
let choice = choices[Math.floor(Math.random()*choices.length)];
return choice
}
// Plays round of rock, paper, scissors between computer and player
function playRound(playerSelection) {
playerSelection = playerSelection.toLowerCase();
computerSelection = computerPlay();
let result;
if (playerSelection !== 'rock' & playerSelection !== 'paper' & playerSelection !== 'scissors'){
result = 'There is no such choice. Please choose either rock, paper or scissors.';
} else if (playerSelection === computerSelection) {
result = 'It is a draw!';
} else if (playerSelection === 'rock' & computerSelection === 'paper') {
result = 'You lost! Paper beats rock.';
} else if (playerSelection === 'rock' & computerSelection === 'scissors') {
result = 'You won! Rock beats scissors.';
} else if (playerSelection === 'paper' & computerSelection === 'scissors') {
result = 'You lost! Scissors beat paper.';
} else if (playerSelection === 'paper' & computerSelection === 'rock') {
result = 'You won! Paper beats rock.';
} else if (playerSelection === 'scissors' & computerSelection === 'paper') {
result = 'You won! Scissors beat paper.';
} else if (playerSelection === 'scissors' & computerSelection === 'rock') {
result = 'You lost! Rock beats scissors.';
}
return result
}
/* function game() {
let playerScore = 0;
let computerScore = 0;
let finalResult;
for (let i = 0; i < 5; i++) {
let outcome = playRound();
if (roundResult = outcome.includes('won')) {
playerScore += 1;
console.log('You won this round!');
} else if (roundResult = outcome.includes('lost')) {
computerScore += 1;
console.log('You won this round!');
} else {
console.log('This round ended in a draw!');
}
}
if (playerScore > computerScore) {
finalResult = `Congratulations! You won ${playerScore} to ${computerScore}!`;
} else {
finalResult = `You lost ${playerScore} to ${computerScore}`;
}
return finalResult;
}
*/
</script>
</body>
</html>
// Call PlayRock upon clicking button #rockbtn
const rockbtn = document.querySelector('#rockbtn');
rockbtn.addEventListener('click', playRock);
// Call function playRound with propery 'rock'
function playRock() {
result = playRound('rock');
return result
}
// Randomly selects computer's choice out of rock, paper or scissors
function computerPlay() {
const choices = ['rock', 'paper', 'scissors'];
let choice = choices[Math.floor(Math.random() * choices.length)];
return choice
}
// Plays round of rock, paper, scissors between computer and player
function playRound(playerSelection) {
playerSelection = playerSelection.toLowerCase();
computerSelection = computerPlay();
let result;
if (playerSelection !== 'rock' & playerSelection !== 'paper' & playerSelection !== 'scissors') {
result = 'There is no such choice. Please choose either rock, paper or scissors.';
} else if (playerSelection === computerSelection) {
result = 'It is a draw!';
} else if (playerSelection === 'rock' & computerSelection === 'paper') {
result = 'You lost! Paper beats rock.';
} else if (playerSelection === 'rock' & computerSelection === 'scissors') {
result = 'You won! Rock beats scissors.';
} else if (playerSelection === 'paper' & computerSelection === 'scissors') {
result = 'You lost! Scissors beat paper.';
} else if (playerSelection === 'paper' & computerSelection === 'rock') {
result = 'You won! Paper beats rock.';
} else if (playerSelection === 'scissors' & computerSelection === 'paper') {
result = 'You won! Scissors beat paper.';
} else if (playerSelection === 'scissors' & computerSelection === 'rock') {
result = 'You lost! Rock beats scissors.';
}
return result
}
/* function game() {
let playerScore = 0;
let computerScore = 0;
let finalResult;
for (let i = 0; i < 5; i++) {
let outcome = playRound();
if (roundResult = outcome.includes('won')) {
playerScore += 1;
console.log('You won this round!');
} else if (roundResult = outcome.includes('lost')) {
computerScore += 1;
console.log('You won this round!');
} else {
console.log('This round ended in a draw!');
}
}
if (playerScore > computerScore) {
finalResult = `Congratulations! You won ${playerScore} to ${computerScore}!`;
} else {
finalResult = `You lost ${playerScore} to ${computerScore}`;
}
return finalResult;
}
*/<button id="rockbtn">Rock</button>
<button id="papertn">Paper</button>
<button id="scissorsbtn">Scissors</button>在函数中，当返回它只是把数据传递给函数的调用者。它不会显示给用户。
在以下示例中,用户将没有任何线索,aa返回,因为它没有被显示或提醒。
function test(){
return test2("aa");
}
function test2(str){
return str;
}
对于学习，在函数playRound(playerSelection) {结束时
添加alert(result);
会弹出一条消息告诉用户结果。还有许多其他方法可以做到这一点，这是最容易学习的。
也可以使用console.log(result);在控制台显示结果。
在下面的代码中，我为所有的按钮添加了一个类，并使用一个data属性来保持按钮的动作(如石头，布，剪刀)。
然后在javascript中，我循环遍历按钮，并为每个按钮添加一个事件处理程序，以获取该数据属性并将其传递给playRound。
为了测试，我没有使用你的For playRound功能，我的只是用于演示目的。
let btns = document.querySelectorAll(".btn");
function playRound(action){
console.log(action)
}
btns.forEach(function(el){
el.addEventListener("click",function(e){
playRound(e.target.getAttribute("data-action"));
});
});<button class="btn" data-action="rock">Rock</button>
<button class="btn" data-action="paper">Paper</button>
<button class="btn" data-action="scissors">Scissors</button>