title: How to stop a numerical counter generated by click events on Javascript
body: <p>I have 3 images of a rock, paper and scissor each inside it's own button in a div. I have an array that has the values rock, paper and scissor. When a user clicks on any of the images, the computer randomly selects from the array and compares the value of the array to that clicked by the user(rock-paper-scissor game). If the value selected by the user beats the value randomly selected by the computer, the user scores 1point and computer scores 0point and vice-versa, and the round winner is reported e.g <em>Player wins the round! Rock beats Scissors</em> and the scores on each rounds are added on the playerScore and computerScore variables and stored.
  I want to play a 10 round game and the first with 10points wins the game, and at this point a reset game button appears below the div which when clicked resets everything to zero and the 10round game can be restarted again.</p>
  <p>Now my problem is on reaching the 10points and the winner is reported, the button can still be clicked and their scores are still added. How can I make this stop when either the computerScore or playerScore is equal to 10? or rather how can I remove the click event in this my case? Here is part of the code</p>
  <pre><code>&lt;div class=&quot;buttons&quot;&gt;
  &lt;button&gt;&lt;img src=&quot;#&quot; alt=&quot;Rock&quot; /&gt;&lt;/button&gt;
  &lt;button&gt;&lt;img src=&quot;#&quot; alt=&quot;Paper&quot; /&gt;&lt;/button&gt;
  &lt;button&gt;&lt;img src=&quot;#&quot; alt=&quot;Scissor&quot; /&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div id=&quot;ps&quot;&gt;0&lt;/div&gt;
    &lt;div id=&quot;cs&quot;&gt;0&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;results&quot;&gt;&lt;/div&gt;
  
  
  let playerScore=0;
  let computerScore=0;
  let playerSelection;
  let computerSelection;
  myArray=[&quot;Rock&quot;,&quot;Paper&quot;,&quot;Scissor&quot;];
  function computerPlay(){
    return myArray[Math.floor(Math.random()*myArray.length)];
  }
  let buttons=document.querySelectorAll(&quot;.buttons&quot;);
  buttons.forEach((button) =&gt; {
    button.addEventListener(&quot;click&quot;,() =&gt; {
      const img = button.querySelector(&quot;img&quot;);
      playerSelection = img.alt.toLowerCase();
      playRound(playerSelection, computerSelection);
      if(playerScore === 10 || computerScore === 10){
         reportWinner();
         resetGame();
       }
     });
   });
  function playRound(playerSelection,computerSelection){
    playerSelection = playerSelection.toLowerCase();
    computerSelection = computerPlay().toLowerCase();
   if(//player wins the round){
      playerScore = ++playerScore;
      keepPlayerScore();
   }else if(//computer wins the round){
      computerScore = ++computerScore;
      keepComputerScore();
   }else{//display draw}
   }
  function keepCS(){
    let computerScores = document.querySelector(&quot;#ps&quot;);
    computerScores.textContent = computerScore;
  }
  function keepPS(){
    let playerScores = document.querySelector(&quot;#cs&quot;);
    playerScores.textContent = playerScore;
  }
  const output = document.querySelector(&quot;#results&quot;);
  function reportWinner(){
     if(playerScore &gt; computerScore){
       output.textContent = &quot;Congratulations!You have won the game.&quot;;
     }else{
       output.textContent = &quot;Computer wins the game!&quot;;
        }
     }
  function resetGame(){
    //creates a button
    //resets the game on button click. Works perfectly
  }
  </code></pre>
  <p>Everything works on fine. Even the functions I have used comments on. I just don't know how to stop the counter at 10. If there is anything that needs clarification I am here to clarify. I am new to programming in general and your help is much appreciated. Thank you!</p>