title: Change text colors every second
body: <p>HTML Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeColor() {
    var x = document.getElementById("li1");
    x.style.color = "blue";
    if (x.style.color == "blue") {
      x.style.color = "yellow";
    }
  }
  window.setInterval("changeColor", 1000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="leftDiv"&gt;
      &lt;div id="stepsId"&gt;
        &lt;ol&gt;
          &lt;li id="li1"&gt;&lt;b&gt;Step 1&lt;/b&gt;&lt;/li&gt;
          &lt;li id="li2"&gt;&lt;b&gt;Step 2&lt;/b&gt;&lt;/li&gt;
          &lt;li id="li3"&gt;&lt;b&gt;Step 3&lt;/b&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My main goal is to cycle through the colors from steps 1 to 3 with each step turning blue > yellow > blue > yellow every second in ascending order. I cannot figure out what am I doing wrong.</p>