How to generate three different random numbers between 1 and 3 by clicking a js button

Question

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.

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

HTML

<div class="scores">
    <div class="scoreDisplay scoreDisplay--1"></div>
    <div class="scoreDisplay scoreDisplay--2"></div>
    <div class="scoreDisplay scoreDisplay--3"></div>
</div>

<a href="#" id="startGame">Start Game</a>

css

.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;

  &--1{
    background:yellow;
  }
  &--2{
    background:orangered;
  }
  &--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;

  &:hover{
    background:blue;
    color:white;
  }
}

JavaScript

var scoreDisplay = document.querySelectorAll(".scoreDisplay");
var startGame = document.querySelector("#startGame");

startGame.addEventListener("click", function(){
       for(var i=0; i<scoreDisplay.length; i++){
    scoreDisplay[i].textContent = Math.floor(Math.random() * 3) + 1; 
    }
})

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.

Here's the link https://codepen.io/myportfolios/pen/BvWYdK in codepen.

Thanks all for your anticipated responses. Happy Coding!

Three different numbers between 1 and 3 are 1,2 and 3. So there are chances that the random function would generate same numbers. — Chetan, Dec 21 '18 at 17:25

score 3 · Answer 1 · answered Dec 21 '18 at 17:26

3

What You really want to do is to get [1, 2, 3] array and shuffle it. I would do it like this:

const numbers = [];
const shuffled = [];

// prepare array of sorted numbers [1, 2, 3]
for(let i=0; i<scoreDisplay.length; i++)
  numbers.push(i + 1);

// shuffle the array by picking random position in sorted array and moving it to result array
while (numbers.length > 0)
  shuffled.push(numbers.splice(Math.floor(Math.random() * numbers.length), 1)[0]);

// print result
for(let i=0; i<scoreDisplay.length; i++)
    scoreDisplay[i].textContent = shuffled[i];

answered Dec 21 '18 at 17:26

Roman Hocke

4,137
1
20
34

thanks for your reply. I tried following through with the code you suggested but couldn't see it through. I guess I just got confused at the end. – Alexander Crucifixio Dec 21 '18 at 21:05
@AlexanderCrucifixio What line of my code is unclear for You? – Roman Hocke Dec 26 '18 at 11:09

score 1 · Answer 2 · answered Dec 21 '18 at 17:25

I think this will do what you're asking:

startGame.addEventListener("click", function() {
    // create an array of valid values, then shuffle them
    var nums = [1,2,3].sort(_ => 0.5 - Math.random());
    for(var i=0; i<scoreDisplay.length; i++) {
      // grab 1 (the last element) from the array
      scoreDisplay[i].textContent = nums.pop();
    }
});

score 1 · Accepted Answer · answered Dec 21 '18 at 17:26

1

As you want to generate only three random numbers and should not be colliding, why can't you use shuffle an array with 3 numbers in it var arr = [1,2,3];

each time player clicks start game, the array shuffles.

Shuffling array - >> How to randomize (shuffle) a JavaScript array?

Thanks

answered Dec 21 '18 at 17:26

Dante

73
4

function shuffle(array) { array.sort(function() { return Math.random() - .5; }); } You can also try this – Dante Dec 21 '18 at 17:27
Thanks a bunch! I followed the link and was able to shuffle the array, now my code runs. Thanks to all that also took out time to contribute. Happy coding!! – Alexander Crucifixio Dec 25 '18 at 07:52

score 0 · Answer 4 · answered Dec 21 '18 at 17:40

0

try below -

    Math.floor(Math.random() * 3)

answered Dec 21 '18 at 17:40

Gaurav

623
5
11

How to generate three different random numbers between 1 and 3 by clicking a js button

4 Answers4