我该如何进行变量设置，以免在以后的功能中重复自己

Question

WARNING!! I AM A NOVICE THROUGH AND THROUGH

Alright, so I know there have been a lot questions about Global variables, and I think that's what I'm looking for, but, not exactly. Lately I've been needing to call upon the same lines of code several times. document.getElementById("example").style or similar to little things like that but I need to continuously repeat.

My question is how do I make it so that I make one variable, outside of the function, to save time writing these lines?

What I've been seeing is to simply write it outside like this var inferno = document.getElementById("inferno"); but this is far from working.

This is my code right now, it's simple because I was just using it as a test, but can anyone help me?

var inferno = document.getElementById("inferno");


function infernoClick () {
    inferno.style.backgroundColor="red";
}

Answer 1

You have the right idea. Note, though, that the variable doesn't have to be global . It just has to be where all of the code that wants to use it can use it.

For example, this creates a global:

<script>
var inferno = document.getElementById("inferno");

function infernoClick () {
    inferno.style.backgroundColor="red";
}

function somethingElse () {
    inferno.style.color="green";
}
</script>

(Note that this needs to be after the markup creating the inferno element.)

The problem with globals is that they can conflict with each other, and in fact the global "namespace" is really, really crowded already.

You can avoid that by wrapping up the code that needs inferno in a scoping function , like this:

<script>
(function() {
    var inferno = document.getElementById("inferno");

    function infernoClick () {
        inferno.style.backgroundColor="red";
    }

    function somethingElse () {
        inferno.style.color="green";
    }
})();
</script>

That code creates an anonymous function and then calls it immediately, running the code inside.

Now inferno is "global" to the functions that need it, but isn't actually a global.

Let's take a further example:

<script>
(function() {
    var outer = 42;

    function doSomethingCool() {
        var inner = 67;

        document.getElementById("someElement").onclick = function() {
            alert("inner = " + inner + ", outer = " + outer);
        };
    }

    // Can't use `inner` here, but can use `outer`
    alert("outer = " + outer);

    doSomethingCool();
})();
</script>

That code wraps everything in a scoping function, and the outer variable is accessible everywhere within that scoping function. It also has a function, doSomethingCool , which has a variable called inner . inner is only accessible within doSomethingCool . Look at what doSomethingCool does: It hooks up an event handler for when someElement is clicked. It doesn't call the function, it just hooks it up.

The really cool thing is that later , when someone clicks the element, that function has access to that inner variable.

And in fact, that's true for arguments you pass into the function as well. One last example:

<input type="button" id="element1" value="One">
<input type="button" id="element2" value="Two">
<script>
(function() {
    function hookItUp(id, msg) {
        document.getElementById(id).onclick = function() {
            alert(msg);
        };
    }

    hookItUp("element1", "This message is for element1");
    hookItUp("element2", "And this one is for element2");

})();
</script>

There, we have this function that accepts a couple of arguments, and we call it twice: Once to hook up click on element1 , and again to hook up click on element2 .

The really cool thing here is that even though the clicks happen much later, after the calls to hookItUp have long-since returned, the functions created when we called hookItUp still have access to the arguments we passed to it — when we click element1 , we get "This message is for element1", and when we click element2 , we get "And this one is for element2."

These are called closures. You can read more about them on my blog: Closures are not complicated

Answer 2

That'll work, but only if the declaration appears after the point in the DOM where the element actually appears. Try moving your <script> to the very end of the <body> .

Another thing you can do is use the window "load" event to make sure the whole DOM has been seen before your code runs.

Answer 3

for example

var myGlobalVars = {"inferno":null,"othervar":null}; // globals in their own scope

function clickMe(varName,color) { // generic function
    myGlobalVars[varName].style.backgroundColor=color;
}

window.onload=function() {
  // initialise after the objects are available
  for (var o in myGlobalVars) myGlobalVars[o]=document.getElementById(o);
  // execute
  clickMe("inferno","red");
}

. .

Answer 4

TJ Crowder gave a beautiful answer about scoping; just to add on that you can also use an immediately-invoked function expression to create a module with your UI elements, ie

var UI = (function() {
  ...
  return {
    inferno: document.getElementById("inferno");
  };
})();

...

UI.inferno.style = ...;