Solved

Variable with global scope not recognized inside function

Posted on 2014-11-05
6
271 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 143

Accepted Solution

by:
Guy Hengel [angelIII / a3] earned 500 total points
ID: 40425578
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
ID: 40425587
It worked! Thank you. I knew it was something simple I wasn't doing.
0
 

Author Comment

by:MBarongan
ID: 40425604
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 our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 143

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 40425637
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
ID: 40425672
Got it working now. Thanks again.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40425704
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will be introduced to the member functions push_back and pop_back of the vector class. The video will teach the difference between the two as well as how to use each one along with its functionality.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

829 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