Q:

Referencing an array item in a function (as string) javascript

I created an array of strings, with the format "monthX" where is a number that increases throughout the array. 
I have a function where I'm trying to reference a specific item of the array, but it keeps coming in as undefined.  Here's my code:
function listCategories() {
    categoryList.innerHTML = ""

    for (var propertyName in categoryObject) {
        var rowHTML = "<div>"
        rowHTML += "<span class = 'category'>" + categoryObject[propertyName].name + "</span>"
        rowHTML += "<span class = '" + monthList[3] + "'><input/></span>"
        rowHTML += "</div>"
        categoryList.innerHTML += rowHTML
    }
}

//Months to load in
for (var i=0; i<24; i++) {
    monthList[i] = "month" + (i + startingMonth)
}

The area I'm interested in is that "monthList[3]" line.  That keeps coming in as undefined, even though I console.log(monthList[3]) it correctly says "month6".  Any ideas?  Do I have bug in my code? 

A:

Well, two questions:
WHEN do you call "listCategories()" ? 
before or after you set monthList? 
And, have you set the global for monthList first? 
    //globalize monthList array to be usable in functions
var monthList;

function listCategories() {
    categoryList.innerHTML = ""

    for (var propertyName in categoryObject) {
        var rowHTML = "<div>"
        rowHTML += "<span class = 'category'>" + categoryObject[propertyName].name + "</span>"
        rowHTML += "<span class = '" + monthList[3] + "'><input/></span>"
        rowHTML += "</div>"
        categoryList.innerHTML += rowHTML
    }
}

//Months to load in
for (var i=0; i<24; i++) {
    monthList[i] = "month" + (i + startingMonth)
}

//do NOT CALL listCategories prior this line!! 

That should do

