Javascript Random Number with Nested If statement

Question

I have some Javascript that selects a random number between 1 and 10, and then loads one of two images into img.src = based on whether the random number chosen was above 5.

This is my code:

if ((Math.random() * 10) + 1 > 5) {
    img.src = '1.jpg';
} else {
    img.src = '2.jpg';
}

This works perfectly for 2 images, however I now want it to choose from 4 images.

I tried doing a nested if statement with the above code but I realised I was running multiple instances of Math.random, which defeated the purpose.

So then I tried to define a variable at the start using Math.random, and then wrote a nested If statement as follows:

var picnumber = Math.floor((Math.random() * 4) + 1);

if (picnumber = 1){
  img.src = '1.jpg';
} else {
  if (picnumber = 2){
    img.src = '2.jpg';
  } 
  else {
  if (picnumber = 3){
    img.src = '3.jpg';
  }
  else {
    img.src = '4.jpg';
  }
}}

I’ve run this code over 20 times and it keeps loading the same image, image “1.jpg”. I think I’m doing something very basic wrong here, how can I ensure that the var picnumber will get assigned a random number (either 1, 2, 3 or 4), and that the correct image will be attached to img.src? (I want each image to have a 25% chance of being chosen).
Thanks in advance for your time!

var num = Math.floor(Math.random() * 4 + 1); img.src = num + ".jpg";. Keep the parts separate; a lookup or if can be applied trivially as needed. In any case the "problem" has nothing to do with random but has to do with = (assignment) vs == (equality compare). — user2864740
– user2864740, Commented Apr 16, 2015 at 19:05

abaracedo · Accepted Answer · 2015-04-16 19:05:30Z

5

You're using the assign operator (=) instead of the comparison operator (==). Also, you can use the elseif and with that way you don't need to put a new if inside the else statement:

var picnumber = Math.floor((Math.random() * 4) + 1);

if (picnumber == 1){
  img.src = '1.jpg';
} else if (picnumber == 2) {
    img.src = '2.jpg';
} else if (picnumber == 3) {
    img.src = '3.jpg';
} else {
    img.src = '4.jpg';
}

answered Apr 16, 2015 at 19:05

abaracedo

1,4545 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emily Over a year ago

Ah thanks @alejandro-bar :) that makes sense! Quick question, if I wanted to expand the number of pictures to say, 200, would this method result in a slow loading time? Or would the application only load one picture (the one that gets selected randomly?)

Rick Hitchcock · Accepted Answer · 2015-04-16 19:34:10Z

3

I'd recommend putting the pictures in an array.

You could then grab a random picture like this:

var pics= ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
    picnumber = Math.floor((Math.random() * pics.length));

img.src= pics[picnumber];

answered Apr 16, 2015 at 19:34

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

6 Comments

Emily Over a year ago

Thanks @rick-hitchcock If I expanded the number of pictures to 200 would putting them in an array like this make the application load slower than it would with only a few images? I'm wondering if the Javascript actually checks/pulls all possible images before one is chosen, or if the loading/initiation speed will be the same no matter how many pictures are in the array?

Rick Hitchcock Over a year ago

It would probably be faster to use the array method, because it could index directly into it without trying each if test until it found the current picnumber.

Rick Hitchcock Over a year ago

It would also save you a bunch of typing! : )

Rick Hitchcock Over a year ago

Note that only the image selected randomly will actually be downloaded, whether you use the array method or the if method.

Emily Over a year ago

ah awesome :) thanks. I was wondering would this method: var num = Math.floor(Math.random() * 4 + 1); img.src = num + ".jpg"; be even faster than an array?

|

fba_pereira · Accepted Answer · 2015-04-16 19:07:10Z

0

try this:

var picnumber = Math.floor((Math.random() * 4) + 1);

if (picnumber == 1) {
  img.src = '1.jpg';
} else {
  if (picnumber == 2) {
    img.src = '2.jpg';
  } else {
    if (picnumber == 3) {
      img.src = '3.jpg';
    } else {
      img.src = '4.jpg';
    }
  }
}

answered Apr 16, 2015 at 19:07

fba_pereira

3364 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript Random Number with Nested If statement

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related