title: How to keep track of Player vs Computer scores
body: <p>I am trying to complete my first coding challenge as i am very new to coding, and i have to admit i am struggling with showing a scorecard that keeps track of the player vs computer score over x amount of games played.</p>
  <p>I have attempted all kinds of ways to do this including loops, and multiple functions, I feel I have been on this for far too long and obviously need help as my efforts are in vein as i can not increase the scores each time a player or computer wins.</p>
  <p>I have gone back to basics and showing you the code below, at the moment the score only goes to a maximum number of 1 for both player and computer and does not continue increasing after that for each win made.</p>
  <p>Can you help?</p>
  <pre><code>//Global Variabes.
  var playerCard = 0;
  var computerCard = 0;
  
  for (var i = 0; i &lt; document.querySelectorAll(&quot;button&quot;).length; i++) {
  
  document.querySelectorAll(&quot;button&quot;)[i].addEventListener(&quot;click&quot;, function() {
  
  var playerChoice = (this.innerHTML);
  var random = Math.floor(Math.random() * 
  document.querySelectorAll(&quot;button&quot;).length);
  var choices = [&quot;Rock&quot;, &quot;Paper&quot;, &quot;Scissors&quot;];
  var compChoice = choices[random];
  
  
  document.querySelector(&quot;.scoreCard&quot;).style.display = &quot;block&quot;;
  document.querySelector(&quot;.player&quot;).innerHTML = playerChoice;// view players choice.    
  document.querySelector(&quot;.computer&quot;).innerHTML = compChoice;// view computers choice.
  
  if (playerChoice === &quot;Rock&quot; &amp;&amp; compChoice === &quot;Scissors&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Player Wins.&quot;;
  } else if (playerChoice === &quot;Scissors&quot; &amp;&amp; compChoice === &quot;Paper&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Player Wins.&quot;;
  } else if (playerChoice === &quot;Paper&quot; &amp;&amp; compChoice === &quot;Rock&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Player Wins.&quot;;
  } else if (playerChoice === &quot;Scissors&quot; &amp;&amp; compChoice === &quot;Rock&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Computer Wins.&quot;;;
  } else if (playerChoice === &quot;Paper&quot; &amp;&amp; compChoice === &quot;Scissors&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Computer Wins.&quot;;;
  } else if (playerChoice === &quot;Rock&quot; &amp;&amp; compChoice === &quot;Paper&quot;) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;Computer Wins.&quot;;;
  } else if (playerChoice === compChoice) {
    document.querySelector(&quot;.result&quot;).innerHTML = &quot;It's a draw&quot;;
  }
  
  function trackPlayerScore() {
  
   if (document.querySelector(&quot;.result&quot;).firstChild.wholeText === &quot;Player Wins.&quot;) {
      document.querySelector(&quot;.pRecord&quot;).innerHTML = playerCard+1;
   } else if (document.querySelector(&quot;.result&quot;).firstChild.wholeText === &quot;Computer Wins.&quot;)  {
       document.querySelector(&quot;.cRecord&quot;).innerHTML = computerCard+1;}
  }//end of trackPlayerScore function.
  trackPlayerScore()
  })// end of anonymous function.
  }// end of initial loop..
  </code></pre>