How to define a global variable in JavaScript that can be accessed in all the functions

Here's a sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".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 although the variable x seems right:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".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?

Here's a sample form:

<!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 although the variable x seems right:

<!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?

Share Improve this question edited Jan 17, 2012 at 16:50 Andreas Köberle 111k58 gold badges280 silver badges307 bronze badges asked Jan 17, 2012 at 12:08 Mori 6,78019 gold badges68 silver badges103 bronze badges

Define doesn't work. Do you get an error? – PeeHaa Commented Jan 17, 2012 at 12:12

Add a comment |

4 Answers 4

Sorted by: Reset to default 8

To make a variable visible in all scopes, you should declare it in the most global scope :

<script>
    var variableName;
</script>

or you could pin it to the global context (window) :

window['variableName'] = value;

Your code doesn't work because of the fact that when x is being defined, the form is not available, which means that you assign nothing to the variable.
You should wrap your initialization in an event handler for the onload event:

window.onload = function(){
    window.x = document.myForm.myInput;
};

var x;
window.onload = function(){
    x = document.myForm.myInput;
};

Your variable x is assigned the document.myForm.myInput value before the DOM is ready. You could place the script after your form and myInput elements have been declared, set the script to run in the onload event, or use jQuery's on document ready support (other js libraries offering similar support are available).

Option 1:

<body>
  <form name="myForm">
    <input name="myInput"> ...
  </form>
  <script>
    ...
  </script>
</body>

Option 2:

window.onload = function(){
  var x = document.myForm.myInput;
  ...
};

Option 3:

(function($) {
   $(function() {
     var x = document.myForm.myInput;
     ...
   });
}(window.jQuery));

Your JavaScript code runs before the rest of the document is loaded. Try placing it at the end, or consider using the onLoad event of body, or if you want to use a library such as jQuery, you could use the ready event.

If you wrap the whole <script> content in a load or domready event, it should work. Alternativly you could put the whole <script>-tag at the bottom of the website (right before closing </body>- tag

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to define a global variable in JavaScript that can be accessed in all the functions - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)