在尝试调整我的 console.log 剪刀石头布游戏以使用 GUI 时 - 我已经为用户输入设置了按钮，但我组合在一起的函数始终返回未定义（getPlayerSelection）。
具体来说，我试图返回单击的按钮的文本内容，以便我可以将其用作用户的输入。 console.log(input) 显示正确的字符串，但当我尝试返回该值时，它总是显示为未定义。
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors!</title>
</head>
<body>
<section id="choices">
<button class="button">Rock!</button>
<button class="button">Paper!</button>
<button class="button">Scissors!</button>
</section>
<script src="javascript.js" defer></script>
</body>
JAVASCRIPT
// player input
function getPlayerSelection(){
const buttons = document.getElementsByClassName('button');
let input = '';
for (const btn of buttons) {
btn.addEventListener('click', () => {
input = btn.textContent;
console.log(input);
})
}
return input;
}
// computer input
function getComputerChoice(){
let randomChoice = Math.floor(Math.random() * 3);
if(randomChoice === 0){
return("Rock!")
} else if(randomChoice === 1){
return("Paper!")
} else {
return("Scissors!")
}
}
function playRound(playerSelection, computerSelection) {
playerSelection = getPlayerSelection();
computerSelection = getComputerChoice();
我尝试为每个按钮设置单独的类名并拥有自己的事件侦听器，但我认为我一定误解了 DOM 操作的工作原理。这也返回未定义。
const rockBtn = document.querySelector('.rockButton');
rockBtn.addEventListener('click', () => {
return 'Rock!';
});
const paperBtn = document.querySelector('.paperButton');
paperBtn.addEventListener('click', () => {
return 'Paper!';
});
const scissorsBtn = document.querySelector('.scissorsButton');
scissorsBtn.addEventListener('click', () => {
return 'Scissors!';
});
您的代码的问题在于您的高阶函数 playGround 的结构不佳，并且您尝试在通过 DOM API 连接按钮之前返回按钮的文本内容。
没有记录错误，因为您使用空字符串初始化了输入变量，因此返回的只是空字符串。
长话短说，每当您调用 playGround 函数时，都会返回空的输入变量，您在链接代码中的按钮之前调用了该函数。
以下代码应该可以工作，您可以根据需要进行调整
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors!</title>
<script src="javascript.js" defer></script>
</head>
<body>
<section id="choices">
<button class="button">Rock!</button>
<button class="button">Paper!</button>
<button class="button">Scissors!</button>
</section>
</body>
</html>
JS
const buttons = document.getElementsByClassName("button");
for (const btn of buttons) {
btn.addEventListener("click", () => {
playRound(btn.textContent);
});
}
function getPlayerSelection(input) {
return input;
}
function getComputerChoice() {
let randomChoice = Math.floor(Math.random() * 3);
if (randomChoice === 0) {
return "Rock!";
} else if (randomChoice === 1) {
return "Paper!";
} else {
return "Scissors!";
}
}
function playRound(playerSelection) {
playerSelection = getPlayerSelection(playerSelection);
computerSelection = getComputerChoice();
console.log(`Player: ${playerSelection}`, `Computer: ${computerSelection}`);
}