Javascript function scope concepts

Question

I am reading this book "Secrets of the Javascript Ninja" where most of the code is demonstrated with the use of a custom assert. The code is as follows:

(function () {
    var queue = [],
        paused = false,
        results;

    this.test = function test(name, fn) {
        queue.push(function () {
            results = document.getElementById("results");
            results = assert(true, name).appendChild(
            document.createElement("ul"));
            fn();
        });
        runTest();
    };

    this.pause = function () {
        paused = true;
    };

    this.resume = function () {
        paused = false;
        setTimeout(runTest, 1);
    };

    function runTest() {
        if (!paused && queue.length) {
            queue.shift()();
            if (!paused) {
                resume();
            }
        }
    }

    this.assert = function assert(value, desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));

        if (results === undefined) results = document.getElementById("results");

        results.appendChild(li);

        if (!value) li.parentNode.parentNode.className = "fail";

        return li;
    };
})();

As you can see is a self invoking function.

I've been playing with it and something that I just cannot understand is why if, between the same tags, I do this:

<script type="text/javascript">

    ... previously shown code ...

    window.onload = function(){
       assert(true, "this works");
    };

</script>

And then again if I just do the assert like this:

<script type="text/javascript">

    ... previously shown code ...
    assert(true, "this does not work");

</script>

When I try to execute the assert without using the window.onload event I get the error "Uncaught TypeError: Cannot call method 'appendChild' to null" on the line "results.appendChild(li)" of the assert method.

Thank you so much for your help.

I haven't really used assert function, but my guess (from the error message) is that it tries to use the DOM, so it will fail if used when it (the DOM) is not ready. — Diego
– Diego, Commented Aug 6, 2012 at 18:46
You know what the onload event is good for? The assert code executes a document.getElementById and tries to append to it - when the DOM is not already loaded this fails. — Bergi
– Bergi, Commented Aug 6, 2012 at 18:47

Esailija · Accepted Answer · 2012-08-06 18:51:55Z

1

The element markup (with id="results") is not parsed by the time the code runs, so trying to fetch it with getElementById returns null, which in turn makes the .appendChild fail.

When you put your code inside the window.onload handler, it's (the code inside the handler function) guaranteed to run only after the window has been loaded at which point the document markup is fully parsed as well and the element is available.

Alternatively, you can simply have your script element come after the target element:

<ul id="results"></ul>
<script>
//your code
</script>

Because the script element comes after the target element, the target element is guaranteed to exist by the time the script runs.

edited Aug 6, 2012 at 18:51

answered Aug 6, 2012 at 18:46

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

epascarello · Accepted Answer · 2012-08-06 18:46:12Z

1

Because you are calling the code before the elements on the page are rendered. So when the code looks for document.getElementById("results") it finds nothing and returns null.

answered Aug 6, 2012 at 18:46

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

Javascript function scope concepts

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related