Javascript Генератор случайных чисел

Question

Я пытаюсь получить 8 случайных чисел между 1-80 и помещать их в указанные div.

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>

Последние 2 чисел показаны неопределенными в HTML результат. Но если вы проверите номера с помощью document.write, вы увидите последние два числа. Как я могу решить эту проблему?

Answer 1

• в то время как цикл проходит от 1 до 7, генерируя 7 чисел вместо 8.
• Массивы в JavaScript являются 0-индексируются, поэтому, когда вы идете через массив в цикл for, начинающийся с 1, вы пропускаете первый номер.
• Вы повторно заполняете divs каждый раз, когда вы создаете новый номер со старыми числами, исключая новый номер. Последнее сгенерированное число никогда не будет включено в этот процесс.

Самое простое исправление заключается в том, чтобы исправить цикл while, удалить цикл for и использовать x, чтобы найти div, где будет отображаться последний номер.

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>

Answer 2

Ваша логика цикла является неправильной. Сначала вы должны заполнить массив чисел, а затем обновить 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>