Function not defined when js in external file

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • gregp1
    New Member
    • Sep 2007
    • 4

    Function not defined when js in external file

    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="ClearI fAppropriate(); " class="textbox" />
    <a onclick="submit ();" href="#">Search </a>
    </form>

    ...
    </html>[/HTML]

    Code:
    <script type="text/javascript" language="JavaScript" >
    <!--
    var LabelText = "- search this site -";
    
    if(document.google.q.value.length == 0) {
    	document.google.q.value = LabelText;
    	}
    
    function ClearIfAppropriate() {
    if(document.google.q.value == LabelText) {
    	document.google.q.value = "";
    	}
    }
    //-->
    </script>
    Now for the problem - it's related to the onclick="ClearI fAppropriate(); " 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.googl e has no properties' and directs me to the line if(document.goo gle.q.value.len gth == 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 'ClearIfAppropr iate 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
    Code:
    function submit() {
    document.google.submit();
    }
    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
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    hi ...

    welcome to TSDN ...

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

    kind regards

    Comment

    • gregp1
      New Member
      • Sep 2007
      • 4

      #3
      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.googl e 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!

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        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.

        Comment

        • gregp1
          New Member
          • Sep 2007
          • 4

          #5
          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!

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Yes, put it inside a function and then call using body onload.

            Comment

            • gregp1
              New Member
              • Sep 2007
              • 4

              #7
              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:
              [CODE=javascript]
              if(document.goo gle.q.value.len gth == 0) {
              document.google .q.value = LabelText;
              }
              [/CODE]
              New code:
              [CODE=javascript]
              function initialise() {
              if(document.goo gle.q.value.len gth == 0) {
              document.google .q.value = LabelText;
              }
              }
              [/CODE]

              HTML:
              Original HTML:
              [HTML]<body>[/HTML]
              New HTML
              [HTML]<body onload="initial ise();">[/HTML]

              Thanks all for your help!
              Greg
              Last edited by acoder; Sep 19 '07, 10:30 AM. Reason: Added language to code tags

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                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).

                Comment

                Working...