rock paper scissors want to make the icons unclickable after you hit a score of 5

Question

i have a Rock Paper Scissors game and whenever I or the computer hits 5 it reloads but I want it so you can't play any more so that the score doesn't go up after you hit 5 now if you hit 5 it will say you lost or you won and after 5 seconds it reloads but you can still click scissors in those 5 seconds and your or the computer score will go up I do not want that

var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_P = document.querySelector(".result>P ");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");
const spock_div = document.getElementById("k");
const lizard_div = document.getElementById("l");


function getComputerChoice() {
  const choices = ['r', 'p', 's', 'k', 'l'];
  const randomNumber = Math.floor(Math.random() * 5);
  return choices[randomNumber];
}

function convertToWord(letter) {
  if (letter === "r") return "Rock";
  if (letter === "p") return "Paper";
  if (letter === "s") return "Scissors";
  if (letter === "k") return "Spock";
  if (letter === "l") return "Lizard";
}


function win(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord} You win! 🔥`;
  userChoice_div.classList.add('green-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('green-glow')
  }, 900);



}

function draw(userChoice, computerChoice) {
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} is the same as ${convertToWord(computerChoice)}${smallCompWord} its a draww!!`;
  userChoice_div.classList.add('gray-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('gray-glow')
  }, 900);


}

function lose(userChoice, computerChoice) {
  computerScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord} You lose!🫥`;
  userChoice_div.classList.add('red-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('red-glow')
  }, 900);


}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case "rs":
    case "rl":
    case "pk":
    case "pr":
    case "sp":
    case "sl":
    case "lp":
    case "lk":
    case "ks":
    case "kr":


      win(userChoice, computerChoice);
      break;

    case "rr":
    case "ll":
    case "kk":
    case "pp":
    case "ss":



      draw(userChoice, computerChoice);
      break;


    case "sr":
    case "kp":
    case "rp":
    case "ps":
    case "ls":
    case "pl":
    case "kl":
    case "sk":
    case "rk":


      lose(userChoice, computerChoice);
      break;
  }

  if (userScore === 5) {
    result_P.innerHTML = `You won the game!🔥`;
    window.setTimeout(function() {
      location.reload()
    }, 5000);
  } else if (computerScore === 5) {
    result_P.innerHTML = `You lost the game!🫥`;
    lockbuttons();
    window.setTimeout(function() {
      location.reload()
    }, 5000);
  }

}

function main() {
  rock_div.addEventListener('click', function() {
    game("r");
  })
  paper_div.addEventListener('click', function() {
    game("p");
  })
  scissors_div.addEventListener('click', function() {
    game("s");
  })
  spock_div.addEventListener('click', function() {
    game("k");
  })
  lizard_div.addEventListener('click', function() {
    game("l");
  })

}
main();

@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #24272e;
}

header {
  background: white;
  padding: 20px;
}

header>h1 {
  color: #24272E;
  text-align: center;
  font-family: Asap, sans-serif;
}

.score-board {
  margin: 20px auto;
  border: 3px solid white;
  width: 200px;
  border-radius: 4px;
  color: white;
  font-size: 46px;
  padding: 15px 20px;
  font-family: Asap, sans-serif;
  position: relative;
  text-align: center;
}

.badge {
  background: #E2584D;
  color: white;
  font-size: 14px;
  font-family: Asap, sans-serif;
}

#user-label {
  position: absolute;
  top: 30px;
  left: -25px;
}

#computer-label {
  position: absolute;
  top: 30px;
  right: -30px;
}

.result {
  font-size: 40px;
  color: white;
}

.result>p {
  text-align: center;
  font-weight: bold;
  font-family: Asap, sans-serif;
}

.choices {
  margin: 50px 0;
  text-align: center;
}

.choice {
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 15px;
  padding: 20px;
  display: inline-block;
  transition: all 0.5s ease;
}

.choice:hover {
  cursor: pointer;
  background: #030303;
}

#action-message {
  text-align: center;
  color: white;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.green-glow {
  border: 4px solid #4dcc7d;
  box-shadow: 0 0 10px #31b43a;
}

.red-glow {
  border: 4px solid #a82418;
  box-shadow: 0 0 10px #fa0000;
}

.gray-glow {
  border: 4px solid #9f9f9f;
  box-shadow: 0 0 10px #706f6f;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
  <meta charset="UTF-8">
  <link href="paper.css" rel="stylesheet">
  <title>rock paper scissors</title>
</head>

<body>
  <header>
    <h1>Rock Paper Scissors Spock Lizard</h1>
  </header>
  <div class="score-board">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
  </div>

  <div class="result">
    <p>welcome to rock paper spock lizard </p>
  </div>

  <div class="choices">
    <div class="choice" id="r">
      <img src="rockk%20.png" alt="rck">
    </div>
    <div class="choice" id="p">
      <img src="paper.png" alt="ppr">
    </div>
    <div class="choice" id="s">
      <img src="scissors.png" alt="scis">
    </div>
    <div class="choice" id="k">
      <img src="spock.png" alt="spk">
    </div>
    <div class="choice" id="l">
      <img src="lizard.png" alt="lzr">
    </div>
  </div>
  <p id="action-message">page will reset after either user or computer has reached a score of 5</p>
  <script src="rockpapersisscors.js"></script>
</body>

</html>

Answer 1

You can add a function which checks score on every move so that it would reset the game if it's already over. Just put it at the beginning of the game function so that it reinitializes the game if necessary

function resetIfOver(){
    if(userScore >= 5 || computerScore >= 5){
        userScore = 0;
        computerScore = 0;
    }
}

The are more sophisticated ways to handle this, but that would involve refactoring the whole game.