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

Question

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

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:

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/

Answer 1

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.

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.

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

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

Answer 2

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

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

Answer 3

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

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