Solved

Variable with global scope not recognized inside function

Posted on 2014-11-05
6
265 Views
Last Modified: 2014-11-06
The script below works fine. Clicking on the button immediately grays it out.

<html>
<head></head>
<script>
 
function disableButton() {      
   document.getElementById("button1").disabled = true;          
}

</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("button1");

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?
0
Comment
Question by:MBarongan
  • 3
  • 2
6 Comments
 
LVL 142

Accepted Solution

by:
Guy Hengel [angelIII / a3] earned 500 total points
Comment Utility
this is because the script is run before the body is actually loaded
you have to move the script below the body part, then it shall work
0
 

Author Closing Comment

by:MBarongan
Comment Utility
It worked! Thank you. I knew it was something simple I wasn't doing.
0
 

Author Comment

by:MBarongan
Comment Utility
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("button1");

function disableButton() {      
  myButton.disabled = true;  
       
}
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 142

Expert Comment

by:Guy Hengel [angelIII / a3]
Comment Utility
I presume that again, the script file is referenced in the header part ...

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

Open in new window


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
0
 

Author Comment

by:MBarongan
Comment Utility
Got it working now. Thanks again.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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>

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There is an easy way, in .NET, to centralize the treatment of all unexpected errors. First of all, instead of launching the application directly in a Form, you need first to write a Sub called Main, in a module. Then, set the Startup Object to th…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
This video will show you how to get GIT to work in Eclipse.   It will walk you through how to install the EGit plugin in eclipse and how to checkout an existing repository.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now