title: creating Javascript animations within HTML
body: <p>I am making a small animation withing a HTML file that is mainly handled by  embedded JavaScript, my oly problem is that the code below does not seem to work due to some logic error or a misuse of a function (still not entirely sure where).
  Could someone offer an alternitive or a fix? </p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
    &lt;head&gt;
        &lt;script&gt;
          function onload(){
            while (1!=1){
              console.log("True")
              function SI(){
                console.log("SI")
                var greenOn = document.getElementById("green").style.display;
                var yellowOn = document.getElementById("yellow").style.display;
                var redOn = document.getElementById("red").style.display;
                if (greenOn != "none"){
                  document.getElementById("green").style.display = "none";
                  document.getElementById("yellow").style.display = "";
                }
                else if (yellowOn != "none") {
                  document.getElementById("yellow").style.display = "none";
                  document.getElementById("red").style.display = "";
                }
                else{
                  document.getElementById("red").style.display = "none";
                  document.getElementById("green").style.display = "";
                }
            }
          setTimeout(function(){console.log("Color change")},3000);
          SI();
        }
      }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;img id="red" src="red.png" style="display: none;" width="400" height="400"/&gt;
        &lt;img id="yellow" src="yellow.png" style="display: none;" width="400" height="400"/&gt;
        &lt;img id="green" src="Green.jpg" style="display: ;" width="400" height="400"/&gt;
        &lt;br/&gt;
        &lt;p onload="onload()"&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/HTML&gt;
  </code></pre>