title: Why is my rock paper scissors not working on the first click, the game works fine but the first click does nothing
body: <p>As explained in the title, for some reason the first time you click it doesn't work but the second click goes through and the game works fine onwards, can anyone explain why? can't figure it out with my noob brain:</p>
  <p>The game logic works perfectly fine, I know I've gone about it in a roundabout way but forgive me I'm still a noob and plan to keep iterating on this to make it more efficient.</p>
  <p>Am I applying the styling to display the results in the wrong place or can you point me to why its not instantly starting the game?</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>const pickIcon = document.getElementsByClassName('icons');
  const pickWord = document.getElementsByClassName('word-choice');
  const rockWord = document.getElementById('rock-word');
  const paperWord = document.getElementById('paper-word');
  const scissorsWord = document.getElementById('scissors-word');
  // const resultContainer = document.getElementById('result');
  let picksDisplay = document.getElementById('picks');
  let resultDisplay = document.getElementById('winner-result');
  let resultShow = document.getElementById('result-game');
  
  let userPickIcon = ''
  let userPick = ''
  let compPick = ''
  
  function playGame() {
  
    //player pick
    for (let i = 0; i &lt; pickIcon.length; i++) {
      pickIcon[i].addEventListener('click', function() {
        document.getElementById('result').style.display = 'block';
        if (pickIcon[i] === pickIcon[0] || pickIcon[i] === pickIcon[3]) {
          userPickIcon = 'rock'
          picksDisplay.innerText = `Player picked ${userPickIcon}`
        } else if (pickIcon[i] === pickIcon[1] || pickIcon[i] === pickIcon[4]) {
          userPickIcon = 'paper'
          picksDisplay.innerText = `Player picked ${userPickIcon}`
        } else if (pickIcon[i] === pickIcon[2] || pickIcon[i] === pickIcon[5]) {
          userPickIcon = 'scissors'
          picksDisplay.innerText = `Player picked ${userPickIcon}`
        }
      })
    }
  
    // computer randomised pick
    let computerChoice = Math.floor(Math.random() * 3);
    if (computerChoice === 0) {
      compPick = 'rock'
      resultDisplay.innerText = `Computer picked ${compPick}`
    } else if (computerChoice === 1) {
      compPick = 'paper'
      resultDisplay.innerText = `Computer picked ${compPick}`
    } else if (computerChoice === 2) {
      compPick = 'scissors'
      resultDisplay.innerText = `Computer picked ${compPick}`
    }
  
    //gamelogic
    if (userPickIcon === compPick) {
      resultShow.innerText = `The game is a tie!!!`
    } else {
      if (userPickIcon === 'rock') {
        if (compPick === 'paper') {
          resultShow.innerText = `Computer is the winner, Sorry :(`
        } else {
          resultShow.innerText = `The Player is the winner, Congratulations!!`
        }
      };
  
      if (userPickIcon === 'paper') {
        if (compPick === 'scissors') {
          resultShow.innerText = `Computer is the winner, Sorry :(`
        } else {
          resultShow.innerText = `The Player is the winner, Congratulations!!`
        }
      };
  
      if (userPickIcon === 'scissors') {
        if (compPick === 'rock') {
          resultShow.innerText = `Computer is the winner, Sorry :(`
        } else {
          resultShow.innerText = `The Player is the winner, Congratulations!!`
        }
      }
    }
  
  
  }
  
  document.addEventListener('click', playGame);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&amp;family=Roboto+Mono&amp;display=swap');
  body {
    background-color: #16213E;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  }
  
  .container {
    background-color: #fff;
    margin: 40px auto;
    width: 500px;
    color: #16213E;
  }
  
  .icons-div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  i {
    padding: 25px;
    font-size: 70px;
    color: #277BC0;
  }
  
  i:hover {
    color: #1CD6CE;
    cursor: pointer;
  }
  
  .word-choice:hover {
    color: #1CD6CE;
    cursor: pointer;
  }
  
  .title-div {
    background-color: #277BC0;
    padding: 10px 0;
    color: #fff;
  }
  
  .results {
    background-color: #fff;
    width: 500px;
    margin: 40px auto;
    height: 200px;
    display: none;
  }
  
  .result-items {
    padding-top: 20px;
    color: #16213E;
  }
  
  #result-game {
    color: #495C83;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  /&gt;
  
  
  &lt;div class="container"&gt;
    &lt;div class="title-div"&gt;
      &lt;h2&gt;Rock, Paper, Scissors&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="choices-title"&gt;
      &lt;h2&gt;Make your choice&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="icons-div"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;i class="fa-solid fa-hand-back-fist icons" id="rock-btn"&gt;&lt;/i&gt;&lt;/td&gt;
          &lt;td&gt;&lt;i class="fa-solid fa-hand icons" id="paper-btn"&gt;&lt;/i&gt;&lt;/td&gt;
          &lt;td&gt;&lt;i class="fa-solid fa-hand-scissors icons" id="scissors-btn"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;h3 id="rock-word" class="word-choice icons"&gt;Rock&lt;/h3&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;h3 id="paper-word" class="word-choice icons"&gt;Paper&lt;/h3&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;h3 id="scissors-word" class="word-choice icons"&gt;Scissors&lt;/h3&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="results" id="result"&gt;
    &lt;div class="result-items"&gt;
      &lt;h3 id="picks"&gt;&lt;/h3&gt;
      &lt;h3 id="winner-result"&gt;&lt;/h3&gt;
      &lt;h2 id="result-game"&gt;&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>