Understanding JavaScript Styling
<p>In the following code, from "<a href="http://www.manning.com/resig/" rel="nofollow">Secrets of the JavaScript Ninja</a>," why does "Another test." show up in red font?</p>

<p><a href="http://jsfiddle.net/dtHyc/" rel="nofollow">http://jsfiddle.net/dtHyc/</a></p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Test Suite&lt;/title&gt;
    &lt;script&gt;

      (function() {
        var results;
        this.assert = function assert(value, desc) {
          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);
          if (!value) {
            li.parentNode.parentNode.className = "fail";
          }
          return li;
        };
        this.test = function test(name, fn) {
          results = document.getElementById("results");
          results = assert(true, name).appendChild(
              document.createElement("ul"));
          fn();
        };
      })();

      window.onload = function() {
        test("A test.", function() {
          assert(true, "First assertion completed");
          assert(true, "Second assertion completed");
          assert(true, "Third assertion completed");
        });
        test("Another test.", function() {
          assert(true, "First test completed");
          assert(false, "Second test failed");
          assert(true, "Third assertion completed");
        });
        test("A third test.", function() {
          assert(null, "fail");
          assert(5, "pass")
        });
      };
    &lt;/script&gt;
    &lt;style&gt;
      #results li.pass { color: green; }
      #results li.fail { color: red; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ul id="results"&gt;&lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
