help with page loading and calling functions

[paulm]

I have a page that upon load i would like to hide or show the content depending on the url. The links within the menu of this page, adjust the url and the content accordinly with out trouble. But if someone copies one of the urls for a menu link, and then use that to goto the page instead of displaying the content specific to that url it displays the base content.

For testing purposes i made all content boxes not visible. Here is the javascript I am using to asses the url and call the functions to change the content.

document.onLoad = getURL();

function getURL(){

var pageURL = location.href;
var startSub = pageURL.indexOf("#");
var currentPage = pageURL.substring(startSub + 1,pageURL.length);

if(currentPage == "CourseRequirements"){
Box2();
} else if(currentPage == "FAQ"){
Box3();
} else if(currentPage == "FinePrint"){
Box4();
} else if(currentPage == "Help"){
Box5();
} else (
Box1();
}
}

The box functions being called are what turn on and off the content. Here is an example of the code for one of them.



function Box1(){

document.getElementById('Item1').src = 'up[1].gif';
document.getElementById('Item2').src = 'down[1].gif';
document.getElementById('Item3').src = 'down[1].gif';
document.getElementById('Item4').src = 'down[1].gif';
document.getElementById('Item5').src = 'down[1].gif';

document.getElementById('BoxOne').style.display = 'block';
document.getElementById('BoxTwo').style.display = 'none';
document.getElementById('BoxThree').style.display = 'none';
document.getElementById('BoxFour').style.display = 'none';
document.getElementById('BoxFive').style.display = 'none';
document.getElementById('BoxSix').style.display = 'none';

document.getElementById('PageImage').src = 'navigate_stock.gif';
}

Just turning elements on and off really. Now the problem is that, well it doesn't work. I know the if statment is working because i can write out the currentPage variable inside the If statements, the one that is being compared to the url. However it doesn't want to seem to call the function. Infact simply trying to call the function from outside of the if statment and just have it call it on load doesn't seem to work.

What am I doing wrong?

[jasonJ]

Where did you define the Box() functions?
How do you know they aren't working?
Did you try something like:

function Box1(){
alert("box1");
}

[paulm]

yes I have tried that, it calls the function fine, it breaks on the first line of the function the one looking for 'item1'. However, these functions work, I can navigate the menu. It is only when I try to do this on load thing that they dont seem to work properly

[paulm]

hmm could it be because the page is trying to run this javascript before the elements i am referencing have loaded. I mean its breaking because it can't find the element i am referencing so thats possible isn't it?

Is there any way to do on load complete in javascript, or could I some how call the function once the page elements are done loading?

[paulm]

I have determined that, that is indeed the problem. The javascript is loading prior to the elements, so when I try telling an element to display on load. It doesn't know where it is and as such does nothing.

Anybody know what the best way to approach this would be?

[jasonJ]

I think you should use
window.onload = getURL();
(note the lowercase event name)
instead of
document.onLoad = getURL();