When/Why does a Browser Implement Code

Your guess is right - the variable definitions are run as soon as they are executed by the browser, so var holder = document.getElementById("testing").value; is going to execute that instruction immediately, regardless whether the DOM structure is ready, since it's in outter-most scope. It all depends on where the code is placed in relation to the application entry point and runtime status.

This can obviously be correct, if that variable is defined in a correct place. Function body will only be executed when the containing function is called. It just 'sits' there, and until it is called, the only concern of the browser is if that code is syntactically correct(conforms to JavaScript specification syntax), i.e. can be parsed.

Your problem doesn't appear to have anything to do with when code is executed.

var holder = document.getElementById("testing").value;

The above defines a variable called holder. It is a global because it is outside of any function.

function gettingValue(holder) {

The function also defines a variable called holder by specifying it as an argument name. This variable is scoped to the function.

When you try to access the variable holder, you access the one in the nearest scope.

That's the argument to the function and not the global.

If you didn't mask it:

function gettingValue() {

Then you would be able to access the global.

Your question is very much about when code executes.

Let's look at each thing you tried. First

function gettingValue() {
    var holder = document.getElementById("testing").value;
    document.getElementById("displayer").innerHTML = holder;
}

That just tells the browser to create a function that is defined by that code in it. It really does not execute the contents of that function, just defines the function. In order for that function to get executed, you have to have some event or some other piece of code, that is executing, call that function. The call to that function, from some event (like a button press) or from other code, tells it to execute.

Now on your second attempt...

var holder = document.getElementById("testing").value;

function gettingValue(holder) {
    document.getElementById("displayer").innerHTML = holder;
}

That first line of code is outside of any function definition and it will probably execute when the page loads. That holder variable DOES get created, and it has global scope, which means any function can access it. But, since you don't event have it inside a document_ready event handler, that "testing" control is probably still undefined (the page is not fully loaded when that statement executes) so you get undefined for the contents of "testing".

For your last example, it is hard to say what is going on without seeing the html that had those "testing" and "displayer" controls.

Bottom line, code gets executed when something calls it. When you load a page, any code that is outside of function declarations, executes and has global scope. Anything defined in a function gets executed when that function is called, either by an event or other code.

The issue with the code in the example is an issue with scope:

Your second example doesn't work as expected because you're referencing two different variables/pointers.

var holder = document.getElementById("testing").value;
function gettingValue(holder) {
    document.getElementById("displayer").innerHTML = holder;
}

The following scope tree should explain this better:

GLOBAL SCOPE:
defined `holder` (through `var`)
    gettingValue SCOPE
        defined `holder` (as parameter)

Because you're defining holder as a parameter for gettingValue, you're no longer able to reference the global scope variable inside of gettingValue because they have the same name.

Specifying a parameter in a function definition is very similar to simply defining that variable within the function itself:

var holder = document.getElementById("testing").value;
function gettingValue(holder) {
    document.getElementById("displayer").innerHTML = holder;
}

Is equivalent to:

var holder = document.getElementById("testing").value;
function gettingValue(firstParameter) {
    var holder = firstParameter;
    document.getElementById("displayer").innerHTML = holder;
}

Instead, you may have success doing one of the following:

function gettingValue(value) {
    document.getElementById("displayer").innerHTML = value;
}

var holder = document.getElementById("testing").value;
gettingValue(holder);

OR

function gettingValue() {
    var holder = document.getElementById("testing").value;
    document.getElementById("displayer").innerHTML = holder;
}

gettingValue();

Notice in both examples above we have to call the function in order to execute it (using gettingValue()).

I hope this helps!

As a side note, Scotch.io has a great article that explains how scope works in JavaScript: https://scotch.io/tutorials/understanding-scope-in-javascript

Alright ; I had two misconceptions that were tripping me up.

1. I was assuming a local variable (used inside function) would be the same as a global variable if they had the same name. //Now that I realize that was the problem I remember reading about it.
2. I had thought document.getElementById(“blah”).value would be read from the ’s value every time it was used. This is not true, it is read only once when it is a global varable. As a local varable it is ‘read’ to whenever the function containing it is called.

I was blindsided by;

1. Global variables in javascript are read before the HTML document puts values into its elements. So that was why var holder = “Blue” returned “Blue” when var holder = document.getElementById(“testing”).value returned undefined. It was an order of operations thing. A value had not been put into the element yet. So my lesson is not to use document.getElement... in global variables.

Thank you all for your time and attention.