Menu
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?
322
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;
};
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));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
