Javascript AddEventListener 只工作一次答案

【问题标题】：Javascript AddEventListener works only onceJavascript AddEventListener 只工作一次
【发布时间】：2017-07-09 11:55:15
【问题描述】：

在下面的代码中，我试图生成 8 个 1-80 之间的随机数，通过单击运行按钮将它们放入 div 中，空数字数组并使用重置按钮擦除 div 内部。

运行按钮只能使用一次。它无法为数字数组创建新元素并再次写入。

代码有什么问题？

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>

【问题讨论】：

在 playRandom 函数中初始化你的 x
你能提供你的html吗？
与此代码相关的第三个问题...我知道我已经看过了。

标签： javascript function dom addeventlistener

【解决方案1】：

在playRandom()函数的开头设置var x = 1，否则(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>

【讨论】：

是啊完全同意@kind用户
x 是否有任何理由成为全局变量？
@Barmar 同意。
@Barmar 不，但我想知道为什么 playRandom() 不查看 x =1 的代码顶部？
@user7580495 确实如此，但仅在加载脚本时一次。如果您单击按钮，您只是调用函数，而不是整个脚本。