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? 

here is my code:

```
<!DOCTYPE html>
<HTML>
  <head>
      <script>
        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();
      }
    }
      </script>
  </head>
  <body>
      <img id="red" src="red.png" style="display: none;" width="400" height="400"/>
      <img id="yellow" src="yellow.png" style="display: none;" width="400" height="400"/>
      <img id="green" src="Green.jpg" style="display: ;" width="400" height="400"/>
      <br/>
      <p onload="onload()"></p>
  </body>
</HTML>

```