Why is my javascript code not updating any text from html?

  html, javascript

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>

Source: Ask Javascript Questions

LEAVE A COMMENT