title: Changing color at specified intervals on button click
body: <p>I am trying to use some CSS and JavaScript on my web page.</p>
  
  <p>I have 3 boxes and I want all 3 boxes to change to the different color and render to the screen and change color again.</p>
  
  <p>For example,
  I have 3 black boxes on the screen. When I click on a button
  the program will wait for 2 seconds
  then the 3 boxes will change to red. Wait for 2 seconds
  then the 3 boxes will change to blue. Wait for 2 seconds
  then the 3 boxes will change to green.</p>
  
  <p>Here is what I have:</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>elem1 = document.getElementById('1')
  elem2 = document.getElementById('2')
  elem3 = document.getElementById('3')
  colorlist = ['purple', 'red', 'blue', 'green']
  
  function changeColor() {
    showRed()
    //wait 2 seconds
    showBlue()
    //wait 2 seconds
    showGreen()
    //wait 2 seconds
  }
  
  function showRed() {
    elem1.style.background = "red"
    elem2.style.background = "blue"
    elem3.style.background = "green"
  }
  
  function showBlue() {
    elem1.style.background = "blue"
    elem2.style.background = "green"
    elem3.style.background = "red"
  }
  
  function showGreen() {
    elem1.style.background = "green"
    elem2.style.background = "red"
    elem3.style.background = "blue"
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  .column3 {
    float: left;
    min-width: 15px;
    max-width: 15px;
    min-height: 15px;
    max-height: 15px;
    padding: 15px;
    background-color: black;
    border-style: solid;
    border-width: medium;
    border-color: white;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="column3" id="1"&gt;&lt;/div&gt;
    &lt;div class="column3" id="2"&gt;&lt;/div&gt;
    &lt;div class="column3" id='3'&gt;&lt;/div&gt;
    &lt;button onclick='changeColor()'&gt; Test &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>