代码新手在这里。所以我正在尝试对我的石头剪刀布游戏进行一些改变。我希望捕获分数并在页面上显示结果文本。每次单击按钮时都会显示文本,但一旦我添加了 +1 增量和在屏幕上实时显示分数的代码,文本就不会显示。我只是首先在“rock”事件侦听器上测试它,以确保它有效。
//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>
任何和所有的帮助将不胜感激!
慕婉清6462132
呼啦一阵风
相关分类