title: How to generate three different random numbers between 1 and 3 by clicking a js button
body: <p>I want my button to generate 3 different numbers between 1 and 3 every time it's clicked and the generated numbers displayed in different html elements.</p>
  
  <p>I am creating a button for my "guessGame". I have already created the interface which includes the buttons and div elements to store the output of t generated numbers. However, I want different numbers between 1 and 3 generated without collisions and stored in each div element. I am using javaScript</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="scores"&gt;
      &lt;div class="scoreDisplay scoreDisplay--1"&gt;&lt;/div&gt;
      &lt;div class="scoreDisplay scoreDisplay--2"&gt;&lt;/div&gt;
      &lt;div class="scoreDisplay scoreDisplay--3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a href="#" id="startGame"&gt;Start Game&lt;/a&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.scores{
    position:absolute;
    left:50%;
    top: 25%;
    transform:translate(-50%,-50%);
  }
  
  .scoreDisplay{
    width:100px;
    height:100px;
    border:1px solid black;
    display:inline-block;
    margin:10px;
    font-size:3rem;
    text-align:center;
    padding-top:20px;
  
    &amp;--1{
      background:yellow;
    }
    &amp;--2{
      background:orangered;
    }
    &amp;--3{
      background:green;
    }
  }
  
  #startGame{
    text-decoration:none;
    text-transform:uppercase;
    padding: 15px 45px;
    border: 1px solid blue;
    border-radius:5px;
    color:blue;
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
    margin-top:20px;
  
    &amp;:hover{
      background:blue;
      color:white;
    }
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var scoreDisplay = document.querySelectorAll(".scoreDisplay");
  var startGame = document.querySelector("#startGame");
  
  startGame.addEventListener("click", function(){
         for(var i=0; i&lt;scoreDisplay.length; i++){
      scoreDisplay[i].textContent = Math.floor(Math.random() * 3) + 1; 
      }
  })
  </code></pre>
  
  <p>I want 3 different numbers generated and displayed in each div element without collision. What I have now the numbers generated at times are the same at times in 2 or all div elements  where they are displayed. </p>
  
  <p>Here's the link <a href="https://codepen.io/myportfolios/pen/BvWYdK" rel="nofollow noreferrer">https://codepen.io/myportfolios/pen/BvWYdK</a> in codepen.</p>
  
  <p>Thanks all for your anticipated responses. Happy Coding!</p>