Solved

Variable with global scope not recognized inside function

Posted on 2014-11-05
6
279 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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 58

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

627 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