为什么我的 javascript 代码没有更新 html 中的任何文本？

Question

I am learning the basics of JavaScript and am working on a rock paper scissors game but can't seem to get the scores or the main prompt to update. Is there something specific that needs updating or is the JavaScript just written incorrectly? I took a tutorial I found and followed that but changed it to fit my project so I am thinking I possibly just didn't adapt the code properly.

 const game = () => { let pScore = 0; let cScore = 0; //play match const playMatch = () => { const options = document.querySelectorAll(".controls button"); const playerHand = document.querySelector(".player-hand"); const compHand = document.querySelector(".comp-hand"); const hands = document.querySelectorAll(".hands img"); hands.forEach(hand => { hand.addEventListener("animationend", function() { this.style.animation = ""; }); }); //Computer Options const compOptions = ["rock", "paper", "scissors"]; options.forEach(option => { option.addEventListener("click", function() { //Computer choice const compNumber = Math.floor(Math.random() * 3); const compChoice = compOptions[compNumber]; setTimeout(() => { //Here is where we call compare hands compareHands(this.textContent, compChoice); //Update images playerHand.src = `https://via.placeholder.com/50/0000ff`; compHand.src = `https://via.placeholder.com/50/ff0000`; }, 1000); // Animation playerHand.style.animation = 'shakePlayer 1s ease'; compHand.style.animation = 'shakeComputer 1s ease' }); }); }; const updateScore = () => { const playerScore = document.querySelector(".player-score p"); const compScore = document.querySelector(".comp-score p"); playerScore.textContent = pScore; compScore.textContent = cScore; }; const compareHands = (playerChoice, compChoice) => { //Update text const winner = document.querySelector(".title"); //We are checking for a tie if (playerChoice === compChoice) { winner.textContent = 'Tie'; return; } //check for ROCK if (playerChoice === "rock") { if (compChoice === "scissors") { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } else { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } } //Check for PAPER if (playerChoice === "paper") { if (compChoice === "scissors") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } //check for SCISSORS if (playerChoice === "scissors") { if (compChoice === "rock") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } }; playMatch(); }; //start the game function game();

 <section class="game grid"> <h2 class="title">A Simple Game of Choice...</h2> <div class="scores grid"> <div class="player-score"> <h3>Player:</h3> <p>0</p> </div> <div class="comp-score"> <h3>Computer:</h3> <p>0</p> </div> </div> <div class="hands grid"> <img class="player-hand" src="https://via.placeholder.com/50" alt="image of a hand forming a rock"> <img class="comp-hand" src="https://via.placeholder.com/50" alt="image of a hand forming a rock"> </div> <div class="controls grid"> <button class="rock">ROCK</button> <button class="paper">PAPER</button> <button class="scissors">SCISSORS</button> </div> </section>

Answer 1

It's because your text values in the buttons are uppercase, whereas the comp values are all lowercase.

You can either change their case in the buttons, or in javascript convert to lowercase.

 const game = () => { let pScore = 0; let cScore = 0; //play match const playMatch = () => { const options = document.querySelectorAll(".controls button"); const playerHand = document.querySelector(".player-hand"); const compHand = document.querySelector(".comp-hand"); const hands = document.querySelectorAll(".hands img"); hands.forEach(hand => { hand.addEventListener("animationend", function(){ this.style.animation = ""; }); }); //Computer Options const compOptions = ["rock", "paper", "scissors"]; options.forEach(option => { option.addEventListener("click", function() { //Computer choice const compNumber = Math.floor(Math.random() * 3); const compChoice = compOptions[compNumber]; setTimeout(() => { //Here is where we call compare hands compareHands(this.textContent.toLowerCase(), compChoice); //Update images console.log("compareHands a", this.textContent); console.log("compareHands b", compChoice); playerHand.src = `./img/${this.textContent}.png`; compHand.src = `./img/${compChoice}.png`; }, 1000); // Animation playerHand.style.animation = 'shakePlayer 1s ease'; compHand.style.animation = 'shakeComputer 1s ease' }); }); }; const updateScore = () => { console.log("updateScore"); const playerScore = document.querySelector(".player-score p"); const compScore = document.querySelector(".comp-score p"); playerScore.textContent = pScore; compScore.textContent = cScore; console.log("pScore", pScore); }; const compareHands = (playerChoice, compChoice) => { //Update text const winner = document.querySelector(".title"); //We are checking for a tie if(playerChoice === compChoice) { winner.textContent = 'Tie'; return; } //check for ROCK if(playerChoice === "rock") { if(compChoice === "scissors") { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } else { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } } //Check for PAPER if (playerChoice === "paper") { if (compChoice === "scissors") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } //check for SCISSORS if (playerChoice === "scissors") { if (compChoice === "rock") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } }; playMatch(); }; //start the game function game();

 <body> <section class="game grid"> <h2 class="title">A Simple Game of Choice...</h2> <div class="scores grid"> <div class="player-score"> <h3>Player:</h3> <p>0</p> </div> <div class="comp-score"> <h3>Computer:</h3> <p>0</p> </div> </div> <div class="hands grid"> <img class="player-hand" src="/img/rock.png" alt="image of a hand forming a rock"> <img class="comp-hand" src="/img/rock.png" alt="image of a hand forming a rock"> </div> <div class="controls grid"> <button class="rock">ROCK</button> <button class="paper">PAPER</button> <button class="scissors">SCISSORS</button> </div> </section> </body>