Rock Paper Scissors - stop game when specific score is reached

I need to stop game with overlay over game with text notice, when user's or computer's score reach value 20:

// cache the dom (storing for future use)
// & reset everything to 0 value
let userScore = 0;
let 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_div = document.querySelector('.result');
const rock_div = document.getElementById('rock');
const paper_div = document.getElementById('paper');
const scissors_div = document.getElementById('scissors');


// set up the core function for the computer that will use math.random to loop through an array and return that value
function getComputerChoice() {
  const choices = ['rock', 'paper', 'scissors'];
  const randomNumber = Math.floor(Math.random() * 3);
  return choices[randomNumber];
}

// similar to convertcase but just takes lowercase and replaces with titlecase
function convertCase(anythingIwant) {
  if (anythingIwant === 'paper') return 'Paper';
  if (anythingIwant === 'scissors') return 'Scissors';
  return 'Rock';
}

// Winning Condition - this handles what happens when the user clicks one of the choices where the value is them passed through as a parameter
function win(user, computer) {
  userScore++;
  userScore_span.innerHTML = userScore;
  //const userName = ' (user)'.fontsize(3).sup();
  //const compName = ' (comp)'.fontsize(3).sup();
  result_div.innerHTML = 'YOU WIN';
  const roundStatus = document.getElementById(user);
  roundStatus.classList.add('winningStyles');
  setTimeout(() => roundStatus.classList.remove('winningStyles'), 300);
}

// Losing Condition - this handles what happens when the user clicks one of the choices where the value is them passed through as a parameter
function loses(user, computer) {
  computerScore++;
  computerScore_span.innerHTML = computerScore;
  //const userName = ' (user)'.fontsize(3).sup();
  //const compName = ' (comp)'.fontsize(3).sup();
  result_div.innerHTML = 'YOU LOSE';
  const roundStatus = document.getElementById(user);
  roundStatus.classList.add('losingStyles');
  setTimeout(() => roundStatus.classList.remove('losingStyles'), 300);
}

// Draw Condition - this handles what happens when the user clicks one of the choices where the value is them passed through as a parameter
function draw(user, computer) {
  //const userName = ' (user)'.fontsize(3).sup();
  //const compName = ' (comp)'.fontsize(3).sup();
  result_div.innerHTML = 'IT\'S A TIE';
  const roundStatus = document.getElementById(user);
  roundStatus.classList.add('drawStyles');
  setTimeout(() => roundStatus.classList.remove('drawStyles'), 300);
}

// The core game functions that set up and determine the games actual logic aka paper beats rock etc
function game(userChoice) {
  const computerChoice = getComputerChoice();

  switch (userChoice + computerChoice) {
	case 'paperrock':
	case 'rockscissors':
	case 'scissorspaper':
	  win(userChoice, computerChoice);
	  break;
	case 'rockpaper':
	case 'scissorsrock':
	case 'paperscissors':
	  loses(userChoice, computerChoice);
	  break;
	case 'rockrock':
	case 'scissorsscissors':
	case 'paperpaper':
	  draw(userChoice, computerChoice);
	  break;
  }
}

// This function creates and adds an eventlistener to the rock, paper scissors html element and the passes the value of that element to the game function
function main() {
  rock_div.addEventListener('click', () => game('rock'));
  paper_div.addEventListener('click', () => game('paper'));
  scissors_div.addEventListener('click', () => game('scissors'));
}

main();

this is HTML I use:

<div class="game">
	<div class="choices">
		<div id="rock" class="choice">
			<img src="/rock.png" title="Select option rock">
		</div>

		<div id="paper" class="choice">
			<img src="/paper.png" title="Select option paper">
		</div>

		<div id="scissors" class="choice">
			<img src="/scissors.png" title="Select option scissors">
		</div>
	</div>
	
	<div class="score">
		<div id="user-label" class="badge">Client - YOU</div>
		<div id="computer-label" class="badge">Competition</div>
		<span id="user-score">0</span><span class="separator">-</span><span id="computer-score">0</span>
	</div>
	
	<div class="result">
		It's your turn
	</div>
</div>

Everything works great, but I need to set limit of score to maximum 20. After reaching this limit (human or computer will reach score 20), the game will stop with displaying text notice over game to prevent endless clicking.

Actually, you should add counter and handlers to your script.
Rewrite win / loose functions as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const maxScore = 20;

function win(user, computer) {
  userScore++;
  userScore_span.innerHTML = userScore;

  if (userScore === maxScore) {
    gameOver('You Win!');
  } else {
    result_div.innerHTML = 'YOU WIN';
    const roundStatus = document.getElementById(user);
    roundStatus.classList.add('winningStyles');
    setTimeout(() => roundStatus.classList.remove('winningStyles'), 300);
  }
}


function loses(user, computer) {
  computerScore++;
  computerScore_span.innerHTML = computerScore;

  if (computerScore === maxScore) {
    gameOver('You Loose!');
  } else {
    result_div.innerHTML = 'YOU LOOSE';
    const roundStatus = document.getElementById(user);
    roundStatus.classList.add('losingStyles');
    setTimeout(() => roundStatus.classList.remove('losingStyles'), 300);
  }
}

function gameOver(message) {
  result_div.innerHTML = message;
  rock_div.removeEventListener('click', () => game('rock'));
  paper_div.removeEventListener('click', () => game('paper'));
  scissors_div.removeEventListener('click', () => game('scissors'));
}

<!-- end snippet -->

and then add condition to your game

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function game(userChoice) {
  if (userScore === maxScore || computerScore === maxScore) {
    return;
  }

  const computerChoice = getComputerChoice();

  // your code
}

<!-- end snippet -->

With these changes, when either the human or the computer reaches a score of 20, the game will display the appropriate notice, and the click events on the choices would be removed, preventing further clicks and ending the game.