DOM elements update very slowly

Question

I'm writing this beginner rock-paper-scissors game. Added event listeners. Somehow it works very strangely.

When I click on weapons with approximately 2s delay or more between each click - it works fine, but when I click really fast on them then my player's weapon and scores update really slow or sometimes don't event update and nothing changes.

I've tried replacing variable declarations in code from global scope to function scope and it still works the same.

const weapons = document.querySelectorAll(".weapons__img");
const playerWeaponSpan = document.getElementById("playerWeapon");
const computerWeaponSpan = document.getElementById("computerWeapon");
const playerScoreSpan = document.getElementById("playerScore");
const computerScoreSpan = document.getElementById("computerScore");

let playerScore = 0;
let computerScore = 0;

const getComputerWeapon = function() {
  const randomNum = Math.floor(Math.random() * 15) + 1;
  if (randomNum <= 5) {
    return "rock";
  } else if (randomNum <= 10) {
    return "scissors";
  } else if (randomNum <= 15) {
    return "paper";
  } else {
    return "ERROR";
  }
};

weapons.forEach((weapon) => {
  weapon.addEventListener("click", (event) => {
    const playerWeapon = weapon.id;
    const computerWeapon = getComputerWeapon();
    if (playerWeapon === "paper" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Rock";

      playerScore++;
    } else if (playerWeapon === "paper" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Scissors";
      computerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Paper";
      playerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Rock";
      computerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Scissors";
      playerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Paper";
      computerScore++;
    }
    playerScoreSpan.textContent = playerScore;
    computerScoreSpan.textContent = computerScore;
  });
});

<header class="header">
  <h1 class="header__heading">Welcome to Rock-Paper-Scissors Game</h1>
  <p>In order to win you need to score up to 5 points</p>
  <p>Pick one of three weapons:</p>
</header>
<main class="main">
  <section class="weapons">
    <div class="weapons__images">
      <img src="https://mgarcia-rps.netlify.app/Paper_1.png" alt="Image #1" id="paper" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Scissors_1.png" alt="Image #2" id="scissors" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Rock_1.png" alt="Image #3" id="rock" class="weapons__img" />
    </div>
  </section>
  <section class="score">
    <div class="score__text">
      <div class="score__numbers">
        <p>
          Player <span id="playerScore">0</span> &mdash;
          <span id="computerScore">0</span> Computer
        </p>
      </div>

      <div class="score__weapons">
        <p>Player's Weapon: <span id="playerWeapon">?</span></p>
        <p>Computer's Weapon: <span id="computerWeapon">?</span></p>
      </div>
    </div>
  </section>
</main>

Answer 1

The only problem i see in the code is that you do not handle the case where the computer and the user choose the same weapon.

So whenever they "tie" the UI does nothing and looks like the click did not happen.