Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    How to define a global variable for all the functions

    Hi,

    Here's a sample form:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample form</title>
    <script type="text/javascript">
    function displayResult() {
    alert(document.myForm.myInput.value);
    }
    function getFocus() {
      if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
        document.myForm.myInput.value = "";
      }
    }
    function loseFocus() {
      if (document.myForm.myInput.value == "") {
        document.myForm.myInput.value = document.myForm.myInput.defaultValue;
      }
    }
    </script>
    </head>
    <body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
    <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
    <input type="button" onclick="displayResult();" value="Display input value">
    </form>
    </body>
    </html>
    It works with no problem, but the following doesn't:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample form</title>
    <script type="text/javascript">
    var x = document.myForm.myInput;
    function displayResult() {
    alert(x.value);
    }
    function getFocus() {
      if (x.value == x.defaultValue) {
        x.value = "";
      }
    }
    function loseFocus() {
      if (x.value == "") {
        x.value = x.defaultValue;
      }
    }
    </script>
    </head>
    <body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
    <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
    <input type="button" onclick="displayResult();" value="Display input value">
    </form>
    </body>
    </html>
    What's wrong with it and how can I define a global variable to be used by all the functions?

    Many thanks in advance!
    Mike

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    var x = document.myForm.myInput;
    That should work if you rearrange your code in a such a way that, that element named myInput is already loaded to the DOM before the execution of the above code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample form</title>
    <script type="text/javascript">
    
    var x;
    
    function displayResult() {	
    	alert(x.value);
    }
    function getFocus() {
      if (x.value == x.defaultValue) {
        x.value = "";
      }
    }
    function loseFocus() {
      if (x.value == "") {
        x.value = x.defaultValue;
      }
    }
    function init(){
    	x = document.myForm.myInput;
    }
    </script>
    </head>
    <body onload="init()">
    <form name="myForm" method="get" onsubmit="return false;" action="">
    <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
    <input type="button" onclick="displayResult();" value="Display input value">
    </form>
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    Rain Lover (01-17-2012)

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Perfect! I just wonder how you compare putting the whole script before the </body> tag and using an onload event as you did.

    Thanks again!

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    If you put the script at the bottom of the body then the web page loads faster and the script can also run sooner provided you leave out the onload.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •