What is the syntax for document.body.style.backgroundColor?
<p>I am a JavaScript newbie. I have the following code and it is behaving very strangely.  What it is <em>supposed</em> to do is originally set the background color to red, then cycle through a series of background colors after an alert dialogue is cleared.  Color names are currently in string formats, but the same behavior results if I use the hex IDs.</p>

<p>Usually, when the page is loaded, it starts off coloring the body red like it is supposed to. The first alert clear sometimes changes the background to orange, sometimes not, then there is no change as the next dialogues (yellow, green, blue, indigo, black) are cleared until the last color change, which sometimes takes and sometimes doesn't.  </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Color Flasher&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;script type="text/javascript"&gt;
    function color1() {
        document.body.style.backgroundColor = 'red';
    }

    function color2() {
        document.body.style.backgroundColor = 'orange';
    }

    function color3() {
        document.body.style.backgroundColor = 'yellow';
    }

    function color4() {
        document.body.style.backgroundColor = 'green';
    }

    function color5() {
        document.body.style.backgroundColor = 'blue';
    }

    function color6() {
        document.body.style.backgroundColor = 'indigo';
    }

    function color7() {
        document.body.style.backgroundColor = 'black';
    }

    function color8() {
        document.body.style.backgroundColor = 'violet';
    }

    color1();

    alert("ready for another color? - orange");
    color2();

    alert("ready for another color? - yellow");
    color3();

    alert("ready for another color? - green");
    color4();

    alert("ready for another color? - blue");
    color5();

    alert("ready for another color? - indigo");
    color6();

    alert("ready for another color? - black");
    color7();

    alert("ready for another color? - violet");
    color8();
&lt;/script&gt;

&lt;center&gt;
&lt;h1&gt;Color Flasher&lt;br&gt;&lt;/h1&gt;
&lt;/center&gt;
&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Can someone explain where I'm getting the syntax wrong?</p>
