Solved

Variable with global scope not recognized inside function

Posted on 2014-11-05
6
269 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
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 142

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 54

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
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.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

777 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