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

Can someone help me understand why I can't push an array to the generatedNumbers global variable with this function:

有人可以帮助我理解为什么我不能使用此函数将数组推送到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;
}

You can see it accompanied by the html here:

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

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

If I put the variables inside the function, it works fine, but I need the variables to be global so they can be accessed by other functions. You can see that code here:

如果我把变量放在函数中,它工作正常,但我需要变量是全局的,所以它们可以被其他函数访问。你可以在这里看到代码:

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

3 个解决方案

#1

your problem is not that global array. Your problem is that you dont gather the actual valus of "totalFrames" and "totalFramesSkip". As the function is invoked. The values of the variables totalFrames and framesToSkip are 0

你的问题不是全局数组。你的问题是你没有收集“totalFrames”和“totalFramesSkip”的实际价值。随着函数被调用。变量totalFrames和framesToSkip的值为0

You have to gather the actual values on function invocation. Add these lines IN your function:

您必须在函数调用上收集实际值。在你的函数中添加这些行:

framesToSkip = document.getElementById("framesToSkip").value;
totalFrames = document.getElementById("totalFrames").value;

Then it should work

然后它应该工作

#2

You're defining your totalFrames and framesToSkip variables before you enter anything into those input boxes or clicking the button to generate. There is nothing in the boxes, so there is nothing to grab, and nothing to push to the array.

在将任何内容输入这些输入框或单击按钮生成之前,您要定义totalFrames和framesToSkip变量。方框中没有任何内容,因此没有什么可以抓取,也没有什么可以推送到阵列。

In your jsfiddle with the variables included, the variables are not defined until the button is clicked, at which point you have numbers already entered in the box.

在包含变量的jsfiddle中,在单击按钮之前不会定义变量,此时您已在框中输入了数字。

You can make the variables global by defining them initially outside of the function, e.g. var totalFrames, framesToSkip;, then assigning to them the values of the input boxes within your onClick function.

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

Revised 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

这是jsfiddle中的更新示例

#3

As others have said: move the variables for totalFrames and framesToSkip inside your function:

正如其他人所说:在你的函数中移动totalFrames和framesToSkip的变量:

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

#1