Javascript Random Number Generator

Question

I'm trying to get 8 random numbers between 1-80 and put them into specified divs.

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

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

The last 2 numbers are shown undefined in HTML result. But if you check the numbers with document.write you can see the last two numbers. How can I solve this problem?

Answer 1

Your looping logic seems to be incorrect. You should fill numbers array first and then update the html.

 var numbers = [] var luckyNumber; var x = 1; while (x < 9) { luckyNumber = Math.floor(Math.random() * 80 + 1); if (numbers.indexOf(luckyNumber) == -1) { numbers.push(luckyNumber); x++; } } for (var i = 1; i < 9; i++) { document.getElementById('k' + i).innerHTML = numbers[i-1] } document.write(numbers); 

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

Answer 2

• The while loop goes from 1 to 7, generating 7 numbers instead of 8.
• Arrays in JavaScript are 0-indexed, so when you go through the array in the for loop that starts from 1 you're skipping the first number.
• You're re-filling the divs every time you generate a new number with the old numbers, excluding the new number. The last generated number will never be included in this process.

The simplest fix is to fix the while loop, remove the for loop and use x to find the div where to display the latest number.

 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++; } } document.write(numbers); 

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