Question

Yo community! might need some insights here.. 🙂 I’m learning some more advance js-concepts. Im running this code but the result is not showing up as I was expecting..I can’t see the error…any idea? thanks!

<script type="text/javascript">

    (function() {
        var results, queue = [];
        this.assert = function(pass, msg) {
            var type = pass ? "PASS" : "FAIL";
            var str = "<li class='" + type + "'><b>" +
                      type + "</b> " + msg + "</li>";
            if ( queue )
                queue.push( str );
            else    
                results.innerHTML += str;
        };

        window.addEventListener("load", function() {
            results = document.getElementById("results");
            results.innerHTML = queue.join('');
            queue = null;
        });

        // calling assert but it's not showing up the <li> with the message....( why? ) 
        assert( true, "I always pass!" );
    })();
</script>

Answer 1

“.is there any chance that else-statement will be used? why is the idea of the else-statement?”

The way this assert() function works is that if it is called before the document load event has occurred any results are stored in the queue array: the condition if (queue) will be true because queue refers to the array.

Then when the load handler runs it takes everything already in queue and outputs it to the results element before setting queue to null:

results.innerHTML = queue.join('');
queue = null;

Any calls to assert() after the document load will then find that if (queue) is false because queue is null, so then the else will be executed and any results will be output directly to the results element.

In your code as shown, there is only one call to assert() and it will occur before the document load handler has run.

(Here’s a clunky demonstration of this – presses to the button will be after the load event: http://jsfiddle.net/JDFuR/1/)