2

At the start of my program, I am declaring and filling 4 arrays that are used throughout the rest of the program:

var imageArrayGroup = [];
var floatingButtonArrayGroup = [];
for (i = 1; i < 3; i++) {
    imageArrayGroup[i] = document.createElement("img");
    imageArrayGroup[i].type = "image";
    floatingButtonArrayGroup[i] = document.getElementById('floatingButton' + (100 + i));
    floatingButtonArrayGroup[i].style.paddingLeft = "35px";
    floatingButtonArrayGroup[i].style.paddingTop = "5px";
}
var imageArray = [];
var floatingButtonArray = [];
for (i = 1; i < 10; i++) {
    imageArray[i] = document.createElement("img");
    imageArray[i].type = "image";
    floatingButtonArray[i] = document.getElementById('floatingButton' + (i));
    floatingButtonArray[i].style.paddingLeft = "35px";
    floatingButtonArray[i].style.paddingTop = "5px";
}

Later on in the code, I call a function that references the arrays. 

function clearThumbnails() {
    for (i = 1; i < 10; i++) {
        if (floatingButtonArray[i].hasChildNodes())
            floatingButtonArray[i].removeChild(imageArray[i]);
    }
    for (i = 1; i < 3; i++) {
        if (floatingButtonArrayGroup[i].hasChildNodes())
            floatingButtonArrayGroup[i].removeChild(imageArrayGroup[i]);
    }
}

When running this function, I get the error "Uncaught TypeError: Cannot read property '1' of undefined"

Why is the variable undefined?

Complete code can be found at: http://codepen.io/angstd/pen/ropca Click on the word "Garage" to get the error message.

Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
kinezu
  • 1,052
  • 1
  • 11
  • 22
  • 2
    You are also getting `TypeError: floatingButtonArrayGroup[i] is null`, which seems to happen in your first loop, which would explain why the array is not defined: `var floatingButtonArray = [];` is never executed. It looks like you are trying to get a reference to an element that doesn't exist at that moment. See http://stackoverflow.com/q/14028959/218196 – Felix Kling Jul 26 '14 at 21:00
  • I'm playing with moving the location in case the DOM object is not created yet. I am declaring the variables at the very first of the Javascript file so maybe I'll play around with when I load the JS within the HTML (currently in the header). – kinezu Jul 26 '14 at 21:06
  • 1
    After glancing more over your code, you should definitely reduce the number of global variables. E.g. `i` should always be local to the functions. – Felix Kling Jul 26 '14 at 21:18

1 Answers1

0

You are getting the error TypeError: floatingButtonArrayGroup[i] is null, which seems to originate in your first loop. This is a runtime error, which will terminate the execution of the script at that point.

That means the assignment var floatingButtonArray = []; is never executed.

It looks like you are trying to get a reference to an element that doesn't exist at that moment. See Why does jQuery or a DOM method such as getElementById not find the element? for solutions to that problem.

Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
  • I've 1) Moved the script just before

    2) Put global variables in Jquery Read() functions. That doesn't work because they are refrenced in non ready() functions. Put all functions in Jquery Read(). Had no luck with that either. 3) Tried the defer attribute. Still no luck...

     – kinezu Jul 26 '14 at 21:52
  • 1
    (1) should work, at least it will resolve the error you mentioned. That doesn't mean that there aren't other problems. Use your browser's debugging tools! – Felix Kling Jul 26 '14 at 21:56