window.onload question

[Fukushousha]

Hello all,I have been working on a registration form for my site. I made a simple javascript to create all the options for the <select> tag for the 3 dropdown menus for a Date Of Birth information.The problem was when to load the script. At first I put it in the window.onload property. The problem there was that it did not recognize any ID. I got errors from document.getElementById("idishere"); So I put it in a separate script file instead and included it inside my html code and it worked. My question is how can I make it load when the page loads but so it can see the id attributes of all the elements of the html file?

[rangana]

How are you creating this one?..by DOM createElement?Could you show us your codes

[Fukushousha]

Of course mate. I just thought that I could explain it in plain english without needing the code. So ... this code works, but if I put it in a function and lauch it by window.onload = function() then it does not work because it can not find any of the id in the document.

			//we get the div by id	div = document.getElementById("dob");	//we create the text to get in the innerHTML of the div	var text = '';				//first stuff	text ='<select name="dayField" id="dayField"><option value="default">Day</option>';	//loop for the days	for(var j=1; j< 32; j++)	{		//if the day is 1-digit		if(j <10)			text = text + '<option value="day0'+j+'">0'+j+'</option>';		else			text = text + '<option value="day'+j+'">'+j+'</option>';	}		//close the days stuff	text = text + '</select>';		//first month stuff	text = text+'<select name="monthField" id="monthField"><option value="default">Month										   </option>';		//loop for the months	for(var k = 1; k < 13; k++)	{		//if the month is 1-digit		if(k <10)			text = text+'<option value="month0'+k+'">0'+k+'</option>';		else			text = text+'<option value="month'+k+'">'+k+'</option>';	}	//close the month stuff	text = text+'</select>';		//start year stuff	text = text+'<select name="yearField" id="yearField"><option value="default">Year</option>';		//loop for years	for(var n = 1900; n<2008; n++)	{		text = text+'<option value="year'+n+'">'+n+'</option>';	}		//close years and end it	text=text+'</select>';		//Now we pass all this stuff into the innerHTML of the div	div.innerHTML = text;

See my problem? It is not about this code ... but it is how to launch this code when the window loads but make it recognize id attributes of the document elements.

[rangana]

You haven't prefixed your div=document.getElementById('dob') with var See if this helps:

<script type="text/javascript">window.onload=function(){	 //we get the div by id	var div = document.getElementById("dob");	//we create the text to get in the innerHTML of the div	var text = '';				//first stuff	text ='<select name="dayField" id="dayField"><option value="default">Day</option>';	//loop for the days	for(var j=1; j< 32; j++)	{		//if the day is 1-digit		if(j <10)			text = text + '<option value="day0'+j+'">0'+j+'</option>';		else			text = text + '<option value="day'+j+'">'+j+'</option>';	}		//close the days stuff	text = text + '</select>';		//first month stuff	text = text+'<select name="monthField" id="monthField"><option value="default">Month										   </option>';		//loop for the months	for(var k = 1; k < 13; k++)	{		//if the month is 1-digit		if(k <10)			text = text+'<option value="month0'+k+'">0'+k+'</option>';		else			text = text+'<option value="month'+k+'">'+k+'</option>';	}	//close the month stuff	text = text+'</select>';		//start year stuff	text = text+'<select name="yearField" id="yearField"><option value="default">Year</option>';		//loop for years	for(var n = 1900; n<2008; n++)	{		text = text+'<option value="year'+n+'">'+n+'</option>';	}		//close years and end it	text=text+'</select>';		//Now we pass all this stuff into the innerHTML of the div	div.innerHTML = text;	}	</script><div id="dob"></div>

Make sure you have the element having the id dob. I added it in the code, in case you don't have one

[Ingolme]

The var keyword really isn't necessary, the same as semicolons at the end of the lines. It's good practise, but it never will explain why a program isn't working.If you want it to run and recognise all the elements by their ID, you can either make it run on the window load event, or you can put the script tag after all the elements you're calling.

[Fukushousha]

That wasn't the problem :)About the var I forgot it .. but I know it is not needed :)As for the id ofcourse I have it added :mellow:The problem is that it works with having it put by script tag after the elements, but it does not work if I put it in the window.onload as a function.

[justsomeguy]

It should work with onload, that event will only fire once the document is finished loading (and all elements have been set up in the DOM). You might want to use Firebug to watch some variables or examine the DOM when the script is running to figure out what's going on.

[skaterdav85]

im just started learning JS, but does the onload event handler typically go in the body tag, or are there instances where it goes in the head section? Thanks!

[justsomeguy]

It only goes in the head section if it's in a script tag. You can do it one of these two ways:

<html>  <head>	<title>Test</title>	<script type="text/javascript">	function runonload()	{	  alert("test");	}	window.onload = runonload;	</script>  </head>  <body onload="runonload();">  </body></html>

The syntax is slightly different, in the body tag you type the function call but when you assign it to window.onload you just assign a reference to the function (without the parens), you don't run it immediately. You could also use an anonymous function like this:window.onload = function() { alert("test"); };For more advanced usage, instead of assigning something directly to window.onload you would check if something is already assigned there and instead of overwriting what's there you would use a function that would run the existing onload event plus whatever you want to run. That's handy if you have an application that's using other toolkits or something, if everything assigns window.onload then only the last one that got assigned is going to get executed, the others will be overwritten. There is also an addEventListener method to do that.http://www.quirksmode.org/js/events_advanced.html

[Fukushousha]

Sorry for the late reply.For the time being I have put it in a different .js file and run it with script tags right where I want it to appear.Whenever I tried to put it in the window.onload event nothing happened. By checking the firefox error console I noticed that it did not recognize the "id" attributes of the the elements I was using.

[jeffman]

Just to be 100% sure, remember your syntax choices are these:window.onload = myFunction;orwindow.onload = "myFunction()";You probably know that, but we're running out of solutions, and I don't think anyone's mentioned it directly.

[Wander]

i think you could also try something like this:window.addEventListener('load',myFunction,true);