CODEWITHSUNDEEP
javascriptglobal-variables
Mori
Mori

Reputation: 6780

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

Upvotes: 4

Views: 27180

Answers (4)

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41757

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));

Upvotes: 4

gion_13
gion_13

Reputation: 41533

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;
};

or 

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

Upvotes: 8

Armin
Armin

Reputation: 15958

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

Upvotes: 0

Jan P&#246;schko
Jan P&#246;schko

Reputation: 5560

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.

Upvotes: 1

Related Questions