hvw3347 Posted December 18, 2007 Share Posted December 18, 2007 Hi,I try to include a javascript in another javascript, but it does not work. Below is my code, all 3 files are in the same folder. Please help to indicate the error:a.js:function disp_alert(txt){ alert(txt)}b.js:document.write('<script type="text/javascript" src="' + a.js + '"></script>'); test_js_in_js.htm:<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Test js in js</title><script language="JavaScript" type="text/javascript" src="b.js"> </script ></head><body><input type="button" onclick="disp_alert('Alert 1')" value="Click me to display alert box 1" /></body></html>When I click the button, it does not show alert. If I replace b.js with a.js in the htm file, then it works. What is wrong? in b.js or in the htm file?Thanks for help!Harvey Link to comment Share on other sites More sharing options...
justsomeguy Posted December 18, 2007 Share Posted December 18, 2007 Don't use document.write. Use the innerHTML property of something like the body. <body id="thebody"><script type="text/javascript">document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";</script></body> Link to comment Share on other sites More sharing options...
Synook Posted December 19, 2007 Share Posted December 19, 2007 And anyway, you need to include "a.js" as part of the string in the document.write() method of b.js document.write('<script type="text/javascript" src="a.js"></script>'); Link to comment Share on other sites More sharing options...
hvw3347 Posted December 19, 2007 Author Share Posted December 19, 2007 Don't use document.write. Use the innerHTML property of something like the body.<body id="thebody"><script type="text/javascript">document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";</script></body> I have some troubles when using your code. If the code is:<body id="thebody"><script type="text/javascript"> document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>"</script><input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /></body>The page displayes as:" then, the-button [Display alert box 1]Why is " shown up? the button still does not work. Did I do anything wrong? Thanks! Link to comment Share on other sites More sharing options...
justsomeguy Posted December 19, 2007 Share Posted December 19, 2007 That was a really bad idea. Note: it's not a good idea to change the innerHTML property of the body onload. There is something going on with the order of events that happen where the innerHTML property might not be set by the time the script runs. I have this page: <html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>"; } </script> </head> <body id="thebody" onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> Pretty basic. When I look at it in the browser I see this:"; }followed by the button. When I view the source code after Javascript modification, it looks like this: <html> <HEAD> <TITLE>JS test</TITLE> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></SCRIPT><BODY id="thebody" onload="add_script()">"; } <INPUT type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1"> </BODY></html> The end of the head and the beginning of the body are now gone, and it stuck the body tag inside the string in the script. I'm not sure specifically why but I bet it's a concurrency issue. I changed it to this instead and it works: <html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e); } </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> Ahh, it looks like the script tag in the string was messing up the HTML parsing. This works: <html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>"; } </script> </head> <body id="thebody" onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> When I look at the generated source code I do see the new script tag at the end of the body, but it does not include the Javascript file and define the function, so the button still doesn't work. Adding the script to the DOM as above does work correctly though. Link to comment Share on other sites More sharing options...
hvw3347 Posted December 19, 2007 Author Share Posted December 19, 2007 That was a really bad idea. Note: it's not a good idea to change the innerHTML property of the body onload. There is something going on with the order of events that happen where the innerHTML property might not be set by the time the script runs. I have this page:<html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>"; } </script> </head> <body id="thebody" onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> Pretty basic. When I look at it in the browser I see this:"; }followed by the button. When I view the source code after Javascript modification, it looks like this: <html> <HEAD> <TITLE>JS test</TITLE> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></SCRIPT><BODY id="thebody" onload="add_script()">"; } <INPUT type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1"> </BODY></html> The end of the head and the beginning of the body are now gone, and it stuck the body tag inside the string in the script. I'm not sure specifically why but I bet it's a concurrency issue. I changed it to this instead and it works: <html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e); } </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> Ahh, it looks like the script tag in the string was messing up the HTML parsing. This works: <html> <head> <title>JS test</title> <script type="text/javascript"> function add_script() { document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>"; } </script> </head> <body id="thebody" onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html> When I look at the generated source code I do see the new script tag at the end of the body, but it does not include the Javascript file and define the function, so the button still doesn't work. Adding the script to the DOM as above does work correctly though. The code with ... e.src = 'a.js'; head.appendChild(e); ...works just fine. However, the last code still does not work when I try. Does it depend on the server? I have IIS 6. Thanks a lot! At least, I've got one that works.Harvey Link to comment Share on other sites More sharing options...
aspnetguy Posted December 19, 2007 Share Posted December 19, 2007 post your current code for all files involved. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 19, 2007 Share Posted December 19, 2007 The last code isn't going to run the Javascript. It does add the script element to the end of the body as HTML code, but the browser doesn't see that and get the script file. So you can use that to write content at the end of the body, but not for scripts. To add a new script use the code that adds a new script element to the head. Link to comment Share on other sites More sharing options...
hvw3347 Posted December 19, 2007 Author Share Posted December 19, 2007 post your current code for all files involved.total 3 files --#1. js2.htm:<html> <head> <title>js-in-js test</title> <script type="text/javascript" src="b.js"> </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html>#2 a.js:function disp_alert(txt){ alert(txt)}#3 b.js:function add_script(){ head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e);}The above b.js works well. The following b.js does not work:function add_script(){ document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";}The web page's status bar shows: "Done, but with error on page". What is wrong? Link to comment Share on other sites More sharing options...
kvijayhari Posted December 21, 2007 Share Posted December 21, 2007 This thread helped to know the innerHTML property for the first time..Thanks Link to comment Share on other sites More sharing options...
paynekj Posted December 21, 2007 Share Posted December 21, 2007 total 3 files --#1. js2.htm:<html> <head> <title>js-in-js test</title> <script type="text/javascript" src="b.js"> </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html>#2 a.js:function disp_alert(txt){ alert(txt)}#3 b.js:function add_script(){ head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e);}The above b.js works well. The following b.js does not work:function add_script(){ document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";}The web page's status bar shows: "Done, but with error on page". What is wrong?In your second attempt you use getElementById looking for the tag with the id "thebody", but in your example you haven't given anything that id.Having fixed that though, it still won't work - Firefox, java script: window reports disp_alert being undefined even though it is definitely add_script. Adding scripts after the page has loaded this way doesn't seem to work.Kevin Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.