Variable with global scope not recognized inside function
The script below works fine. Clicking on the button immediately grays it out.
<html>
<head></head>
<script>
function disableButton() {
document.getElementById("b
}
</script>
<body>
<input type="button" value="click here" id="button1" onclick = "disableButton()"/>
</body>
</html>
But when I create reference to the button with global scope, the script no longer works. Clicking the button no longer disables it. The modified script below does not work.
<html>
<head></head>
<script>
myButton = document.getElementById("b
function disableButton() {
myButton.disabled = true;
}
</script>
<body>
<input type="button" value="click here" id="button1" onclick = "disableButton()"/>
</body>
</html>
Shouldn't myButton be recognized inside the function?
<html>
<head></head>
<script>
function disableButton() {
document.getElementById("b
}
</script>
<body>
<input type="button" value="click here" id="button1" onclick = "disableButton()"/>
</body>
</html>
But when I create reference to the button with global scope, the script no longer works. Clicking the button no longer disables it. The modified script below does not work.
<html>
<head></head>
<script>
myButton = document.getElementById("b
function disableButton() {
myButton.disabled = true;
}
</script>
<body>
<input type="button" value="click here" id="button1" onclick = "disableButton()"/>
</body>
</html>
Shouldn't myButton be recognized inside the function?
ASKER CERTIFIED SOLUTION
![Avatar of Guy Hengel [angelIII / a3]](https://filedb.experts-exchange.com/files/public/2013/11/25/ddbe0ea6-aa6e-4279-b781-57b735dd3ea0.jpeg){kind=small}
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I moved to script to an external js file and now it doesn't work again. Is there something I need to put in the external file to make it work? All I have is this:
var myButton = document.getElementById("b
function disableButton() {
myButton.disabled = true;
}
var myButton = document.getElementById("b
function disableButton() {
myButton.disabled = true;
}
I presume that again, the script file is referenced in the header part ...
what you may do, in any case, is something like this:
so, your function setmyobjects sets all the objects you would need, testing however only one (which should be enough)
all your functions that needs such "global" objects first call this function
what you may do, in any case, is something like this:
var myButton = null;
function setmyobjects() {
if ( myButton = null ) {
myButton document.getElementById("button1");
}
}
function disableButton() {
setmyobjects();
myButton.disabled = true;
} so, your function setmyobjects sets all the objects you would need, testing however only one (which should be enough)
all your functions that needs such "global" objects first call this function
ASKER
Got it working now. Thanks again.
You probably want to look at the onload function as well. This is called when the document is ready. By using onload you can place your script anywhere (although at the bottom is usually a good place - but not always feasible)
<html>
<head></head>
<script type="text/javascript">
var myButton; // Declare the variable
// Wait for the DOM to be ready
window.onload = function() {
// Set your button
myButton = document.getElementById("button1");
}
// myButton is now pointing to the <input>
function disableButton() {
myButton.disabled = true;
}
</script>
<body>
<input type="button" value="click here" id="button1" onclick = "disableButton()"/>
</body>
</html>
ASKER