javascript - 将函数内部生成的数组推送到全局变量

Question

谁能帮我理解为什么我不能用这个函数将数组推送到 generatedNumbers 全局变量:

var totalFrames = document.getElementById("totalFrames").value;
var framesToSkip = document.getElementById("framesToSkip").value;
var generatedNumbers = [];

function clickGenerate() {
  for (var i = 1; i <= totalFrames; i++) {
    if ((i % framesToSkip) === 0) {
      // do nothing
    } else {
      generatedNumbers.push(i);
    }
  }
  document.getElementById("numberList").innerHTML = generatedNumbers;
}

你可以在这里看到它伴随着 html:

https://jsfiddle.net/bdorrance/wszzvpu1/

如果我将变量放在函数中，它可以正常工作，但我需要变量是全局的，以便其他函数可以访问它们。您可以在此处查看该代码:

https://jsfiddle.net/bdorrance/t246rnxe/

Answer 1

您定义了totalFrames 和framesToSkip 变量之前您在这些输入框中输入任何内容或单击按钮生成。盒子里没有任何东西，所以没有东西可以抓取，也没有东西可以推到阵列上。

在包含变量的 jsfiddle 中，直到单击按钮时才定义变量，此时您已经在框中输入了数字。

您可以通过在函数外部定义变量来使变量成为全局变量，例如var totalFrames, framesToSkip;，然后在您的 onClick 函数中为它们分配输入框的值。

修改后的 JS:

var totalFrames, framesToSkip;

function clickGenerate() {
    totalFrames = document.getElementById("totalFrames").value;
    framesToSkip = document.getElementById("framesToSkip").value;
    var generatedNumbers = [];

    for (var i = 1; i <= totalFrames; i++) {
        if ((i % framesToSkip) === 0) {
            // do nothing
        } else {
            generatedNumbers.push(i);
        }
    }
    document.getElementById("numberList").innerHTML = generatedNumbers;
}

function showFullResult() {
    document.getElementById("numberList").innerHTML = "full test";
}

function showShortResult() {
    document.getElementById("numberList").innerHTML = "short test";
}

Here is an updated example in jsfiddle