Jump to content
Fukushousha

window.onload question

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...