.appendChild trouble

This site is best viewed in a modern browser with JavaScript enabled.

okham

Hi, I wondered if anyone might have a suggestion for me on this javascript snippet. I've used this code to write into an html page an array from an external source. I have not used this code for a long time, and found that when I looked at the website it had stopped functioning. Can anyone suggest what may be wrong with this that would keep it from loading properly now? In this example, "lookpath" is the path to the external .js file with the array I want to read into the html page.

e=window.document.createElement('script');
	e.setAttribute('src',lookpath);
	window.document.body.appendChild(e);

Thanks for any suggestions - - Okham

coothead

Hi there okham,
[indent]
try it like this...

[color=navy]
   var e=document.createElement('script');
       e.setAttribute('src',[color=red]'lookpath.js'[/color]);
	 document.body.appendChild(e);[/color]

[/indent]

coothead

bionoid

Depending on when it's run could rather be the problem. If this script is sitting in the document <head> before the body, then the <body> element won't be available (unless you're using the documents onload event or similar).

[COLOR="#FF0000"]window.onload = function()
{[/COLOR]

e = window.document.createElement('script');
e.setAttribute('src',lookpath);
window.document.body.appendChild(e);

[COLOR="#FF0000"]};[/COLOR]

Alternatively the script could sit as a node within the <body>:

<body>

<script type="text/javascript">

	e = window.document.createElement('script');
	e.setAttribute('src',lookpath);
	window.document.body.appendChild(e);

</script>

</body>

okham

Thanks for the suggestion coothead. That doesn't seem to be the problem. This is a script that is referenced in the index <head>, in an external file called "main.js". Maybe I should include more of the function. If you're interested, take a look at it and see if you notice what might now be hanging up the works...

	switch(parent.imgtype)
	{
		case "design":
			lookpath="items/designs/des"+jumpdesno+".js";
			lookpic.src="pics/designs/design"+jumpdesno+".gif";
			break;
		case "mono":
			lookpath="items/monos/mono"+jumpdesno+".js";
			lookpic.src="pics/monos/mono"+jumpdesno+".gif";
			monodiv.style.display="block";
			break;
		default: break
	}
	e=window.document.createElement('script');
	e.setAttribute('src',lookpath);
	window.document.body.appendChild(e);
	clr1.innerHTML=chng1[0];
	clr2.innerHTML=chng2[0];
	clr3.innerHTML=chng3[0];
	clr4.innerHTML=chng4[0];
	clr5.innerHTML=chng5[0];
	clr6.innerHTML=chng6[0];
	clr7.innerHTML=chng7[0];
	clr8.innerHTML=chng8[0];
	clr9.innerHTML=chng9[0];
	clr10.innerHTML=chng10[0];	
	clr11.innerHTML=chng11[0];
	clr12.innerHTML=chng12[0];
	clr13.innerHTML=chng13[0];
	desnum=des[0];
	desno.innerHTML=des[0];
	size3.innerHTML=wxh3[0];size4.innerHTML=wxh4[0];size5.innerHTML=wxh5[0];size6.innerHTML=wxh6[0];

okham

Thanks bionid. The script is linked to the index in the <head> by an external script file "main.js". I'll include more of the script here so you've got a clearer picture of what's happening...of course, it may be as you said that the <BODY> isn't available, though it was previously and it worked.

function makeitem(lookno)
{
	if(parent.jumpq==1)
		{
		switch(lookno)
			{
			case "No. Only":
				parent.document.getElementById('look').style.display='none';alert("Enter design no., or Click another menu option."); jumpdesno=0; parent.djump.value="No. Only"; parent.jumpq=0;
				break;
			case "":
				parent.document.getElementById('look').style.display='none';alert("Enter design no., or Click another menu option."); jumpdesno=0; parent.djump.value="No. Only"; parent.jumpq=0;
				break;
			case parent.djump.value:
				if(lookno<0){parent.document.getElementById('look').style.display='none'; alert("Enter a number between '0' and "+nodes+", or Click another menu option."); jumpdesno=0; parent.djump.value="No. Only"; parent.jumpq=0;}
				if(lookno>nodes){parent.document.getElementById('look').style.display='none'; alert("Enter a number between '0' and "+nodes+", or Click another menu option."); jumpdesno=0; parent.djump.value="No. Only"; parent.jumpq=0;}
				break;
			case parent.mjump.value:
				if(lookno<0){parent.document.getElementById('look').style.display='none'; alert("Enter a number between '0' and "+nomonos+", or Click another menu option."); jumpdesno=0; parent.mjump.value="No. Only"; parent.jumpq=0;}
				if(lookno>nomonos){parent.document.getElementById('look').style.display='none'; alert("Enter a number between '0' and "+nomonos+", or Click another menu option."); jumpdesno=0; parent.mjump.value="No. Only"; parent.jumpq=0;}
				break;
			default: break;
			}
		jumpdesno=lookno; parent.djump.value="No. Only"; parent.mjump.value="No. Only"; parent.jumpq=0;
		}
		else{lookpicno="pic"+lookno; jumpdesno=top.document.passform[lookpicno].value; parent.jumpq=0;}

switch(parent.imgtype)
{
	case "design":
		lookpath="items/designs/des"+jumpdesno+".js";
		lookpic.src="pics/designs/design"+jumpdesno+".gif";
		break;
	case "mono":
		lookpath="items/monos/mono"+jumpdesno+".js";
		lookpic.src="pics/monos/mono"+jumpdesno+".gif";
		monodiv.style.display="block";
		break;
	default: break
}
e=window.document.createElement('script');
e.setAttribute('src',lookpath);
window.document.body.appendChild(e);
clr1.innerHTML=chng1[0];
clr2.innerHTML=chng2[0];
clr3.innerHTML=chng3[0];
clr4.innerHTML=chng4[0];
clr5.innerHTML=chng5[0];
clr6.innerHTML=chng6[0];
clr7.innerHTML=chng7[0];
clr8.innerHTML=chng8[0];
clr9.innerHTML=chng9[0];
clr10.innerHTML=chng10[0];	
clr11.innerHTML=chng11[0];
clr12.innerHTML=chng12[0];
clr13.innerHTML=chng13[0];
desnum=des[0];
desno.innerHTML=des[0];
size3.innerHTML=wxh3[0];size4.innerHTML=wxh4[0];size5.innerHTML=wxh5[0];size6.innerHTML=wxh6[0];
}

bionoid

When is the function [FONT=Courier New]makeitem[/FONT] invoked? It is still a question of when this code is executed, and whether the <body> is available at the time.
If you run the code in Chrome or FireFox, the console would report the error you're experiencing, particularly it would say the body element is null if not found.

okham

I see what you're saying bionid. Well, the function is called in the <BODY>, as in...

<body onLoad="makeitem(parent.lookno);" bgcolor="#ffffff">

So I think by what you're saying, BODY should be available to append to...I might add that this HTML file is loaded in an iFrame.

okham

I might be able to find a solution if I approach the problem differently...I'll explain what I'm trying to accomplish...I have an iFrame on an index page that I load an html file into. In this file I include a script file called "main.js". Using onLoad I call a function out of main.js. In main.js I initialize a series of arrays. When I call this function called makeitem(), I try to read into the html file a subsequent array from an external file that I want to overwrite the first initialization. Basically I write into the innerHTML the values of the new array using appendChild. Originally this all worked, but perhaps changes in browsers has made my original code ineffective. If anyone could suggest a way to accomplish these tasks, feel free to reply. I know it's complicated...lol. Any examples of how this might be accomplished would be helpful, I'm sure. - - Okham