Solved

Variable with global scope not recognized inside function

Posted on 2014-11-05
6
272 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 56

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Link not working 6 41
Run do it again at windows startup and execute the saved doit again sctipt 3 15
selected value 16 23
Help to debug powershell script 5 38
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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to user default arguments when defining functions. This method of defining functions will be contrasted with the non-default-argument of defining functions.
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.

679 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