title: Change text color and background color using javascript
body: <p>I need to have serval buttons on this web page to change the <p> color and background color. 
  Here are the actual text and CSS file plus the javascript</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 changeForeground() {
    var div = document.getElementById("foreground").className = "colorA";
  }
  
  function changeBackground() {
    var div = document.getElementById("background").className = "backgroundB";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.colorA {
    color: #4581cf;
  }
  .colorB {
    color: #B7E2FF;
  }
  .backgroundA {
    background-color: #4581cf;
  }
  .backgroundB {
    background-color: #B7E2FF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="background" class="backgroundA"&gt;
    &lt;div id="foreground" class="colorB"&gt;
      &lt;p&gt;blah blah blah&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  Foreground
  &lt;INPUT type="button" Value="A" class="colorA" id="button1" onclick="changeForeground()" ;&gt;
  &lt;INPUT type="button" Value="B" class="colorB" id="button2" onclick="changeForeground()" ;&gt;Background
  &lt;INPUT type="button" Value="C" class="backgroundA" id="button3" onclick="changeBackground()" ;&gt;
  &lt;INPUT type="button" Value="D" class="backgroundB" id="button4" onclick="changeBackground()" ;&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>right now I can only change the text color by typing the actually class such as "colorA" and "backgroundB" after I get the element by Id to change the color. 
  but what I am trying to do is in the javascript function, how can I change the text color based on which button I click. 
  What I mean is after I get the element by Id such as "foreground", how can I change its current class (colorB) to the class (colorA) if I just clicked button A</p>