Trouble with my javascript function, I think with document.getElementById('vodObj').innerHTML

Question

I am trying to write a JavaScript function that will update the labels and attributes of my CSS menu. The CSS menu I create dynamically with PHP and a database, and I want to update the CSS menu so the top item is the currently selected one, and the currently selected one does not appear in the list below it. Now that you know what I am trying to accomplish, here is my code:

var vodName = Array();
var vodAddress = Array();
var vodDate = Array();

function switchVod(vodID) {
    alert("switchVod ran");
    var x = document.getElementById("vod1");
    var y = x.getElementsByTagName("span");
    y[0].innerHTML = vodName[vodID];
    for (var i = 0; i < vodName.length; i++) {
        if (i != vodID) {
            var gameNum = i + 2;
            var gameID = "vod" + gameNum;
            var x = document.getElementByID(gameID);
            var y = x.getElementsByTagName("span");
            y[0].innerHTML = vodName[i]
            x.onclick = function () {
                switchVod(id);
            }
        }
    }
    alert("after for loop");
    alert("1"); //works
    document.getElementById('vodObj').innerHTML = 'some string';
    alert("2"); //doesn't work
    document.getElementById("vodDate").innerHTML = " some string ";
    alert("finished"); //doesn't work
}

Deeper in the webpage, after getting my information from the database and storing the strings I need in the vodName, vodAddress, and vodDate arrays, and creating the CSS menu and <div id="vodObj"> and <div id="vodDate">, I initialize the page by calling

window.onload = switchVod(0);

It wasn't doing what I hoped, so I added some alert() calls to see how far into the function it was going before failing. alert("after for loop") worked, as did alert("1"). But, alert("2") does not pop up, and neither does alert("finished"), so I think the problem is with document.getElementById('vodObj').innerHTML = 'some string';.

Any ideas of what I could be doing wrong?

You might need to post the relevant HTML the selectors are referring to. If possible, creating a [**jsFiddle**](http://jsfiddle.net) demonstrating the issue would even be better and it would give the other developers a sandbox to test out a solution. — Nope, Nov 26 '13 at 22:03

score 0 · Answer 1 · answered Nov 26 '13 at 22:03

0

y[0].innerHTML = vodName[vodID];

At this point vodName is an empty array. Actually throughout all of this, you never provide any values to vodName. Please provide complete document.

answered Nov 26 '13 at 22:03

ECWyne

423
3
8

That's true, but it wouldn't cause an error. This seems to be rather a comment than an answer. Please don't use the answer section for comments, wait until you have the comment privilege (50 rep). – Felix Kling Nov 26 '13 at 22:12
Also if you read the question thoroughly, you will notice *"[...] after getting my information from the database and storing the strings I need in the vodName, vodAddress, and vodDate arrays [...]"* – Felix Kling Nov 26 '13 at 22:25

score 0 · Accepted Answer · edited May 23 '17 at 10:31

window.onload = switchVod(0);

executes switchVod and assigns the return value to window.onload. So it is very likely that the elements you are trying to access (#vodObj in particular) are not loaded yet.

You have to assign a function to window.onload:

window.onload = function() {
    switchVod(0);
};

See also Why does jQuery or a DOM method such as getElementById not find the element?

There is an other problem which will encounter eventually:

x.onclick = function () {
    switchVod(id);
}

You never defined id anywhere, and if you define it inside the loop, you will run into closure issues. See JavaScript closure inside loops – simple practical example for a solution.

Trouble with my javascript function, I think with document.getElementById('vodObj').innerHTML

2 Answers2