[英]Only part of my if-else statement within my event listener is working
代碼新手在這里。 所以我正在嘗試對我的剪刀石頭布游戲進行一些更改。 我希望捕獲分數並在頁面上顯示結果文本。 每次單擊按鈕時都會顯示文本,但是一旦我添加了 +1 增量和代碼以在屏幕上實時顯示分數,文本就不會顯示。 我只是先在“搖滾”事件偵聽器上測試它,以確保它能正常工作。
//Selects the classes .rock .paper .scissors
const rock = document.querySelector(".rock")
const paper = document.querySelector(".paper")
const scissors = document.querySelector(".scissors")
//new div under results
const results = document.getElementById("results");
//new items
let itemRock = document.createElement('h3');
let itemPaper = document.createElement('h3');
let itemScissors = document.createElement('h3');
//variable for computerPlay() function to be printed to #results
itemRock.textContent = 'You have chosen rock!';
itemPaper.textContent = 'You have chosen paper!';
itemScissors.textContent = 'You have chosen scissors!';
//Player + computer score for count purposes
let playerScore = 0;
let computerScore = 0;
rock.addEventListener('click', function() {
computerPlay();
if(computerPlay() === 'paper') {
itemRock.textContent = 'You have chosen rock and the computer has chosen paper.' + 'You lose, paper beats rock! Try again';
computerScore += 1;
document.getElementById("computer-score").innerText = computerScore;
} else if (computerPlay() === 'rock') {
itemRock.textContent = 'You have chosen rock and the computer has chosen rock.' + 'Its a draw, try again';
} else {
itemRock.textContent = 'You have chosen rock and the computer has chosen
scissors. ' + 'You win! Rock beats scissors.';
playerScore += 1;
document.getElementById("player-score").innerText = playerScore;
}
return 'rock';
});
HTML 代碼:
<div class="choice">
<button type="button" class="rock">Rock</button>
<button type="button" class="paper">Paper</button>
<button type="button" class="scissors">Scissors</button>
</div>
<div id="results">
</div>
<p>Player Score: <a id="player-score">0</a></p>
<p>Computer Score: <a id="computer-score">0</a></p>
任何和所有幫助將不勝感激!
你應該給computerPlay
打一次function
rock.addEventListener('click', function() {
const result = computerPlay();
if (result) {
itemRock.textContent = 'You have chosen rock and the computer has chosen paper.
' + 'You lose, paper beats rock! Try again';
computerScore += 1;
document.getElementById("computer-score").innerText = computerScore;
} else if(result) {
itemRock.textContent = 'You have chosen rock and the computer has chosen rock.
' + 'Its a draw, try again';
} else {
itemRock.textContent = 'You have chosen rock and the computer has chosen
scissors. ' + 'You win! Rock beats scissors.';
playerScore += 1;
document.getElementById("player-score").innerText = playerScore;
}
return 'rock';
})
調用computerPlay
播放function這樣
computerPlay();
if (computerPlay() === 'paper')
沒有意義,因為你調用了兩次(計算機一次點擊播放兩次)
我看到您每次執行 if/else 語句時都在調用 computerPlay() function。 這將返回不同的值,假設 computerPlay() 隨機返回石頭、布或剪刀。 您可以做的一件簡單的事情就是將返回值存儲在這樣的變量中
let computersHand = computerPlay();
然后在執行 if/else 語句時使用此變量
if (computersHand === 'rock') {
// ...
} else if (computersHand === 'paper') {
// ...
} else {
// ...
}
如果出於某種原因不想將返回值存儲到變量中,則可以使用 switch 語句
switch (computerPlay()) {
case 'rock':
// ...
break;
case 'paper':
// ...
break;
case 'scissors':
// ...
break;
}
我建議你讀這個
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.