Connecting Tech Pros Worldwide Forums | Help | Site Map

Function not defined when js in external file

Newbie
 
Join Date: Sep 2007
Posts: 4
#1: Sep 17 '07
Hi guys,

Here's the code I'm to refer to:

[HTML]
<html>
<body>
....

<form method="get" action="http://www.google.com/search" name="google" />
<input type="text" name="q" size="25" maxlength="255" value="- search this site -" onclick="ClearIfAppropriate();" class="textbox" />
<a onclick="submit();" href="#">Search</a>
</form>

...
</html>[/HTML]

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="JavaScript" >
  2. <!--
  3. var LabelText = "- search this site -";
  4.  
  5. if(document.google.q.value.length == 0) {
  6.     document.google.q.value = LabelText;
  7.     }
  8.  
  9. function ClearIfAppropriate() {
  10. if(document.google.q.value == LabelText) {
  11.     document.google.q.value = "";
  12.     }
  13. }
  14. //-->
  15. </script>
Now for the problem - it's related to the onclick="ClearIfAppropriate();" function. Firefox will execute this function just fine if I embed the js in the html file after the function call; however it fails if I try to do it either of these ways:

* if I embed the code BEFORE the function call, e.g. in the <head> zone where it would normally belong, the code runs properly but FF generates a javascript error 'document.google has no properties' and directs me to the line if(document.google.q.value.length == 0) of the js code.
* if I put the code in a separate file with <script src="...> anywhere on the page, be it in the header zone or after the function call where I previously embedded the code, the function fails when clicking on the text box (which calls the function) and I get a js error 'ClearIfAppropriate is not defined' which directs me to the first line of the html code <!DOCTYPE ....

Now I've linked to code before and had no problems, in fact <a onclick="submit();" href="#"> refers to a function in a linked file
Expand|Select|Wrap|Line Numbers
  1. function submit() {
  2. document.google.submit();
  3. }
and this works fine. Clearly one solution is to embed the code after the function call but this is messy and I don't think it should be necessary. It looks to me as though the issue is related to the code being executed before the external function has been imported or something; though why the same works for the other function is beyond me.

Would appreciate any help you can offer.

Thanks!
Greg

gits's Avatar
Moderator
 
Join Date: May 2007
Location: Munich, Germany
Posts: 4,134
#2: Sep 17 '07

re: Function not defined when js in external file


hi ...

welcome to TSDN ...

simply remove the script-tags and the html-comment-tags from the external javascript file ...

kind regards
Newbie
 
Join Date: Sep 2007
Posts: 4
#3: Sep 17 '07

re: Function not defined when js in external file


Thanks for that! Sometimes one can't see the wood for the trees.

That restores the normal behaviour of inline compared to linked, but but I still get a 'document.google has no properties' error when the function call appears after the function link (e.g. when it's linked in the page header). This doesn't happen for the other function submit();. I can always link it below the search box but I'd prefer to have it in the header. What am I doing wrong?

Thanks again!
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Sep 17 '07

re: Function not defined when js in external file


On line 5, you're checking for the value of document.google.q.value, but it doesn't exist yet. You could make this check on page load if you want.
Newbie
 
Join Date: Sep 2007
Posts: 4
#5: Sep 18 '07

re: Function not defined when js in external file


Yes that correlates with the code working if linked after it's called. So how do I implement your suggestion? <body onload="....."> or something? Sorry I'm still pretty green on extending js!
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Sep 18 '07

re: Function not defined when js in external file


Yes, put it inside a function and then call using body onload.
Newbie
 
Join Date: Sep 2007
Posts: 4
#7: Sep 19 '07

re: Function not defined when js in external file


Thanks, that worked!

Sometimes experts can assume us newbies know more than we actually do, so for anyone else reading this who is as green as I am, here's what I changed:

javascript:

Original code:
Expand|Select|Wrap|Line Numbers
  1.     if(document.google.q.value.length == 0) {
  2.         document.google.q.value = LabelText;
  3.         }
  4.  
New code:
Expand|Select|Wrap|Line Numbers
  1. function initialise() {
  2.     if(document.google.q.value.length == 0) {
  3.         document.google.q.value = LabelText;
  4.         }
  5. }
  6.  
HTML:
Original HTML:
[HTML]<body>[/HTML]
New HTML
[HTML]<body onload="initialise();">[/HTML]

Thanks all for your help!
Greg
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Sep 19 '07

re: Function not defined when js in external file


Glad you got it working. Post again anytime should you need help solving another problem. Your explanation was nice and simple for any newbie to understand (hopefully).
Reply