title: How to change div content with setTimeout inside of a for loop?
body: <p>I have the following code. What I would like the header to do is to change through the different text "Head #" continuously. The code works to change it at intervals, but only once. After the changing is completed, it does not loop and continue the cycle for some reason.</p>
  
  <pre><code>&lt;p class="header"&gt;Head 1&lt;/p&gt;
  
  &lt;script&gt;
      var changeThis = document.getElementsByClassName("header");
      for(i=0;i&lt;10000;i++){
          setTimeout(function() {
              changeThis[0].innerHTML = "Head 2";
          },5000)
          setTimeout(function() {
              changeThis[0].innerHTML = "Head 3";
          },10000)
          setTimeout(function() {
              changeThis[0].innerHTML = "Head 4";
          },15000)
          setTimeout(function() {
              changeThis[0].innerHTML = "Head 1";
          },20000)
      }
  &lt;/script&gt;
  </code></pre>