4

Below you can find the code for creating random 8 numbers between 1 and 80. It puts the random numbers into the numbers array and writes into the divs. Code runs without any problem if it increments the x inside if brackets. If I put the 'x++' outside of if brackets, after several run I found that sometimes it creates a same random number and finds inside the numbers array. Then it skips and that div comes empty.

What is the difference between incrementing x in if block and incrementing x outside if block ?

Inside the if block :

var numbers = []
var luckyNumber;
var x = 1;

while (x <= 8) {
  luckyNumber = Math.floor(Math.random() * 80 + 1);
  if (numbers.indexOf(luckyNumber) == -1) {
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
    x++;
  }
}

Outside the if block :

var numbers = []
var luckyNumber;
var x = 1;

while (x <= 8) {
  luckyNumber = Math.floor(Math.random() * 80 + 1);
  if (numbers.indexOf(luckyNumber) == -1) {
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
  }
  x++;
}

HTML:

<div id="k1">K1</div>
<div id="k2">K2</div>
<div id="k3">K3</div>
<div id="k4">K4</div>
<div id="k5">K5</div>
<div id="k6">K6</div>
<div id="k7">K7</div>
<div id="k8">K8</div>
Improve this question

5 Answers 5

Reset to default
4

When you put the increment outside the if condition, if there is a number already present in the numbers array, then it wont enter into the if condition and hence the div never fills up. However you move on to the next div, since you incremented the x value. If you put the x incrementation outside, the x values remains the same when the condition inside if not met, hence in the next iteration the condition may pass or its keep trying.

Execution flow

When you have increment inside if 

1) Generate random number.
2) Check in is already generated, if yes skip it. // you see ? when skip no increment happens, because the increment inside the the condition.
3) Generate again and go to step 2.

When you have increment outside if 

1) Generate random number.
2) Check in is already generated, if yes skip it. Increase x value to next. //** you see ? incrementing no matter you skip it or not.
3) Generate again and go to step 2.
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Does it continue to create random number and check if it's already in numbers array ? I thought that if statement runs once for every iteration of while loop. So it won't increment until if condition is true and keeps trying. Right ?
@user7580495 Yes. It is, otherwise, if it is once generated and found in array, you need to generate again and check. Isn't it? It is happening right now.
1
  • Because in the first example you advance x only in the case if a unique random number has been generated.
  • In the second example you advance x regardless if the generated number was unique or not. So it could happen in this case, that out of the 8 times it tried (because that is your while condition), it generated only two unique random numbers, for example.
Improve this answer

Comments

0

if you write x++ outside if it always increases by 1 ..and if you put inside if its clear that it increases when your condition is satisfied.. according to this you output may differ.

Improve this answer

Comments

0

You could use do while loop for checking, if the number is already taken.

var numbers = [],
    luckyNumber,
    x = 1;

while (x <= 8) {
    do {
        luckyNumber = Math.floor(Math.random() * 80 + 1);
    } while (numbers.indexOf(luckyNumber) !== -1)
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
    x++;
}
<div id="k1">K1</div>
<div id="k2">K2</div>
<div id="k3">K3</div>
<div id="k4">K4</div>
<div id="k5">K5</div>
<div id="k6">K6</div>
<div id="k7">K7</div>
<div id="k8">K8</div>

Improve this answer

Comments

0

incrementing outside, if block will execute without any condition.

But you are incrementing inside, if block will execute only in that condition is true.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.