title: How do I make a color-changing background?
body: <p>So, I know this may be an easy problem to fix, but anyway...</p>
  
  <hr>
  
  <p>I'm trying to make it where I can change the webpage's background color, in order like below:</p>
  
  <pre><code>red &gt; yellow &gt; green &gt; blue &gt; purple &gt; pink &gt; brown &gt; red
  </code></pre>
  
  <p>Click <a href="http://www.kahoot.it" rel="nofollow noreferrer">here</a> for a demo of a webpage that does what I'm trying to do for my webpage.</p>
  
  <hr>
  
  <p>I think I can use some JavaScript on the body element:</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-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;body id="body" bgcolor="#FFFFFF"&gt;
           &lt;script&gt;
               var body = document.getElementById('body'); /* Get
               the element with the id of 'body' */
               
               /* I need some javascript to make the 'hex'
               variable change accordingly, then call the setColor() with
               the parameter as a string for the hex code to change the                                    
               background color */
               
               function setColor(hex) {
                  body.setAttribute("bgcolor", hex); /* Set the
                  attribute bgcolor to the counter variable */
               }
           &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  I just need to make it where the hex variable changes in the order like I stated above. I need a for loop, a while loop, or some loop to repeat the process of changing the background color. The setColor() function is there to easily change the color. Does anyone know how to implement this into a webpage? Thanks!</p>