Javascript AddEventListener работает только один раз

Question

В приведенном ниже коде я пытаюсь сгенерировать 8 случайных чисел между 1-80, поместить их в div с нажатием кнопки запуска, пустым массивом чисел и стирать внутри divs с помощью кнопки сброса.

Кнопка запуска работает только один раз. Он не может создавать новые элементы для массива чисел и писать снова.

Что не так с кодом?

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

 
function playRandom() { 
 
    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++; 
 
    } 
 
    } 
 
} 
 

 
function resetRandom() { 
 
    for (var z = 1; z <= 8; z++) { 
 
    document.getElementById('k' + z).innerHTML = ' '; 
 
    } 
 
    numbers = []; 
 
} 
 

 
var runX = document.getElementById("run"); 
 
runX.addEventListener("click", playRandom); 
 

 
var resetX = document.getElementById("reset"); 
 
resetX.addEventListener("click", resetRandom);

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

 
<button id="run">Run</button> 
 
<button id="reset">Reset</button>

Answer 1

Установите var x = 1 в начале функции playRandom(), в противном случае условие (x <= 8) не будет препятствовать функция больше бежать дальше.

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

 
function playRandom() { 
 
    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++; 
 
    } 
 
    } 
 
} 
 

 
function resetRandom() { 
 
    for (var z = 1; z <= 8; z++) { 
 
    document.getElementById('k' + z).innerHTML = ' '; 
 
    } 
 
    numbers = []; 
 
} 
 

 
var runX = document.getElementById("run"); 
 
runX.addEventListener("click", playRandom); 
 

 
var resetX = document.getElementById("reset"); 
 
resetX.addEventListener("click", resetRandom);

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

 
<button id="run">Run</button> 
 
<button id="reset">Reset</button>