How do make variables acessible to all functions in JavaScript? - Stack Overflow

admin管理员组

文章数量:1434929

I'm curious about what I'm not understanding in this code snippet...

Why does this work?

 function insert_number(number){
   var output = document.getElementById('output');
   output.value += number.value;
 }

but this doesnt work?

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

Does it have something to do with the way the variable output is defined?

Also how would I write the output variable within the function insert_number() while still making output available to all other functions in my script (even if it means having to escape the variable out of the function, or specifically send it to another function as a parameter)?

Note: All my code is in an external ".js" file

the plete context of the code as of right now is this (I will be adding more later):

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

function clear_output(){
  output.value = "";
}

I'm curious about what I'm not understanding in this code snippet...

Why does this work?

 function insert_number(number){
   var output = document.getElementById('output');
   output.value += number.value;
 }

but this doesnt work?

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

Does it have something to do with the way the variable output is defined?

Also how would I write the output variable within the function insert_number() while still making output available to all other functions in my script (even if it means having to escape the variable out of the function, or specifically send it to another function as a parameter)?

Note: All my code is in an external ".js" file

the plete context of the code as of right now is this (I will be adding more later):

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

function clear_output(){
  output.value = "";
}

• javascript
• global-variables
• getelementbyid

Share Improve this question Follow edited Feb 1, 2012 at 18:50 person0 asked Feb 1, 2012 at 18:27 person0person0 1,39822 gold badges1515 silver badges2222 bronze badges 2

• 1 what do you mean it doesnt work? looks fine to me – Ibu Commented Feb 1, 2012 at 18:31
• Is that the plete context of your code or is there more? – j08691 Commented Feb 1, 2012 at 18:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Here is a solution that will keep only a single object/namespace in the global scope:

(function(global, d) {
    var output = d.getElementById('output'),
        myApi = {};

    myApi.insert_number = function(number){
      output.value += number.value;
    };

    //export your api to the global scope
    global.myApi = myApi;
})(window, document);

Now you can call myApi.insert_number(5); You now have a closure that has access to the output variable so you can add additional functionality to your API without having to access the DOM each time.

Just a reminder, JavaScript like this should be placed at the bottom of your page just above the closing </body>

I would recend watching this video on global scope: http://www.watchmecode/javascript-scope

Actually, they both work, as long as the DOM element at

document.getElementById('output')

exists when the code is run. The important difference is that your insert_number function probably runs after the DOM is loaded, unlike the bare output assignment in the second example.

Also how would I write the output variable within the function insert_number() while still making output globally available to all other functions in my script?

Good JavaScript developers try to avoid global variables where unnecessary, but the simple answer is this:

var output; // declared, but as yet undefined

window.onload = function () {
    window.output = document.getElementById("output");
}

function insert_number(number) {
    output.value += number.value;
}

This has nothing to do with global variables.

You are probably having the script inside your head. At that stage, the DOM is not fully built yet and the element with ID output does not exist yet. Hence document.getElementById('output') will return null (example).

But if you are probably calling insert_number some time after the DOM was built, as response to some user interaction. In that case the element will exist.

The simplest solution would be to put your code before the closing body tag (example, notice the different jsfiddle settings and/or inspect the source).

I think the reason your code is not working is because the DOM is not loaded when you call var output = document.getElementById('output');

Move the code below where the output div is and it should work

If you declare a variable, without using "var", the variable always bees global. More info here: http://www.w3schools./js/js_variables.asp

本文标签： How do make variables acessible to all functions in JavaScriptStack Overflow