All geek questions in one place

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

Here is an example 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 without problems, but the following does not work, although the x variable seems to be correct:

 <!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 is wrong with it, and how can I define a global variable that will be used by all functions?

+4
source share
4 answers

Your x variable is set to document.myForm.myInput until the DOM is ready. You can place the script after your form and myInput elements have been declared, set the script to run in the onload event, or use jQuery to support documents (other js libraries are available that offer similar support).

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));
+3
source

To make a variable visible in all areas, you must declare it in the global area itself:

 <script> var variableName; </script>

or you can bind it to a global context (window):

 window['variableName'] = value;

Your code does not work because when x is defined, the form is unavailable, which means that you are not assigning anything to the variable.
You must transfer your initialization to the event handler for the onload event:

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

or

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

JavaScript code is executed before the rest of the document is loaded. Try putting it at the end or consider using the onLoad body event, or if you want to use a library like jQuery, you can use ready .

+1
source

If you complete all <script> content in a load or domready event, it should work. Alternatively, you can place the entire <script> -tag at the bottom of the site (right before closing </body> - tag

0
source

Source: https://habr.com/ru/post/1391429/

More articles:


All Articles