0

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?

1
  • You might need to post the relevant HTML the selectors are referring to. If possible, creating a jsFiddle demonstrating the issue would even be better and it would give the other developers a sandbox to test out a solution.
    – Nope
    Nov 26, 2013 at 22:03

2 Answers 2

0
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.

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.

2
  • 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). Nov 26, 2013 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 [...]" Nov 26, 2013 at 22:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.