title: JavaScript onClick Reset and or different result
body: <p>I am new at JavaScript and was stuck figuring out this problem today.</p>
  
  <p>I have a button and 2 rectangles, one red one blue. Once I click the button the switch places (more like color), what I am trying to figure out is to make the second click revert back to the original state that these 2 rectangles been. So far it only works one way.</p>
  
  <p>Any response will be appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeColorOfElementID(id, color){
  
   document.getElementById(id).style.backgroundColor = color;
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#aRectangle{
   position:absolute;
   width:100px;
   height:100px;
   left:100px;
   top:100px;
   background-color: blue;
   z-index:1;
  }
  #aRectangle2{
   position:absolute;
   width:100px;
   height:100px;
   left:110px;
   top:110px;
   background-color: red;
   z-index:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Color Switch&lt;/title&gt;
   &lt;script src="js/code.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button onClick="changeColorOfElementID('aRectangle', 'red'); changeColorOfElementID('aRectangle2', 'blue'); " &gt;Change Color&lt;/button&gt;
  
  &lt;div id="aRectangle"&gt;&lt;/div&gt;
  &lt;div id="aRectangle2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>