title: Rock, paper, scissors. Can't seem to get buttons working. (beginner)
body: <p>I'm making a Rock, Paper, Scissors game. Everything worked in the console, so now I'm working on making buttons work. I've selected each of the buttons and added an event listener too, but I'm breaking my head against the implementation of it. </p>
  
  <p>When I click "start", the game starts, but when I click - for example - the "rock" button, it immediately runs the game 5 times with "rock" as the only playerPick. I tried breaking it down: the loop runs 5 times and doesn't stop and wait for a second click. </p>
  
  <p>It probably has to do with the positioning of my different functions.</p>
  
  <p>Thanks in advance for anyone reading this! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scorePlayer = 0;
      var scoreComputer = 0;
      let displayPlayerScore = document.getElementById("playerScore");
      let displayComputerScore = document.getElementById("computerScore");
      let rockButton = document.getElementById("rock");
      let paperButton = document.getElementById("paper");
      let scissorsButton = document.getElementById("scissors");
      let startButton = document.getElementById("startGame");
      let playerPick = "";
      
      let computerPlay = () =&gt; {
        const pick = ["rock", "paper", "scissors"];
        computerPick = pick[Math.floor(Math.random() * pick.length)];
      };
      
      let playerPlay = () =&gt; {
        rockButton.addEventListener("click", function(){
          return playerPick = "rock";
        });
        
        paperButton.addEventListener("click", function(){
         return playerPick = "paper";
        });
        
        scissorsButton.addEventListener("click", function(){
          return playerPick = "scissors";
        });
        // playerPick = prompt("what's your pick?").toLowerCase();
      };
      
      // game is played for 5 rounds max
      let game = () =&gt; {
        for (var i = 0; i &lt; 5; i++) {
          playerPlay();
          computerPlay();
          let playRound = (p, c) =&gt; {
            if (p === c) {
              console.log("=================")
              console.log("Draw. PLAY AGAIN!");
              console.log("=================")
            } else if (c === "rock" &amp;&amp; p === "paper") {
              scorePlayer += 1;
              displayPlayerScore.textContent = scorePlayer;
              console.log("=================")
              console.log(`${playerPick} beats ${computerPick}. \n Player score: ${scorePlayer}`);
              console.log("=================")
            } else if (c === "paper" &amp;&amp; p === "scissors") {
              scorePlayer += 1;
              displayPlayerScore.textContent = scorePlayer;
              console.log("=================")
              console.log("Player wins. Player score: " + scorePlayer);
              console.log("=================")
            } else if (c === "scissors" &amp;&amp; p === "rock") {
              scorePlayer += 1;
              displayPlayerScore.textContent = scorePlayer;
              console.log("=================")
              console.log("Player wins. Player score: " + scorePlayer);
              console.log("=================")
            } else if (c === "rock" &amp;&amp; p === "scissors") {
              scoreComputer += 1;
              displayComputerScore.textContent = scoreComputer;
              console.log("=================")
              console.log("Computer wins. Score of computer: " + scoreComputer);
              console.log("=================")
            } else if (c === "paper" &amp;&amp; p === "rock") {
              scoreComputer += 1;
              displayComputerScore.textContent = scoreComputer;
              console.log("=================")
              console.log("Computer wins. Score of computer: " + scoreComputer);
              console.log("=================")
            } else if (c === "scissors" &amp;&amp; p === "paper") {
              scoreComputer += 1;
              displayComputerScore.textContent = scoreComputer;
              console.log("=================")
              console.log("Computer wins. Score of computer: " + scoreComputer);
              console.log("=================")
            }
          };
          playRound(playerPick, computerPick);
        }
      };
      
      startButton.addEventListener("click", function(){
        game();
      });
      
      console.log("Score player: " + scorePlayer);
      console.log("Score computer: " + scoreComputer);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
      &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
      &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
      &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
          &lt;head&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;meta name="description" content=""&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;link rel="stylesheet" href=""&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div&gt;
                  &lt;p&gt;Player Score: &lt;span id="playerScore"&gt;0&lt;/span&gt;&lt;/p&gt;
                  &lt;p&gt;Computer Score: &lt;span id="computerScore"&gt;0&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="rock" value="rock"&gt;ROCK&lt;/button&gt;
                  &lt;button id="paper" value="paper"&gt;PAPER&lt;/button&gt;
                  &lt;button id="scissors" value="scissors"&gt;SCISSORS&lt;/button&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="startGame"&gt;START&lt;/button&gt;
              &lt;/div&gt;
              &lt;script src="script.js" async defer&gt;&lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>