Javascript AddEventListenerは一度しか動作しません

Question

以下のコードでは、1から80までの8つの乱数を生成しようとしています。実行ボタンをクリックしてdivに入れ、空の数値配列を作成し、リセットボタンでdivを消去します。

実行ボタンは1回だけ機能します。配列の新しい要素を作成して再度書き込むことはできません。

コードに問題がありますか？

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 = 1playRandom()関数の先頭で、そうでない場合(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>