title: Changing Background and Foreground with linked css in html
body: <p>I have looked literally everywhere. The goal is to
  Use the classes in the stylesheet to set color and background
  For example, class selector colorA will set the text color to color ‘A’
  Change the color of the text by changing the class of the div with id foreground
  Change the background color by changing the class of the div with id background.</p>
  
  <p>I was able to change it by manually entering the color, but when I try to change it by getting className it fails.
  Here is my code Ive tried several different things with no luck, please help:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function changeBG(col) {
    var x = document.getElementsByTagName("DIV")[0];
    x.backgroundColor = (col);
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="holder"&gt;
  &lt;div id="background" class="backgroundC"&gt;
      &lt;div id="foreground" class="colorE"&gt;
          &lt;p&gt;
              Lorem ipsum &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;div class="holder"&gt;
  &lt;table&gt;
   Foreground &lt;INPUT type="button" value="A" class = "colorA" name="button3"        onClick= "document.fgColor= 'colorA'"&gt;
       &lt;INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'"&gt;
  
      Background &lt;INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'"&gt;
       &lt;INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS Stylesheet:</strong></p>
  
  <pre><code>.colorA {
    color: #4581cf;
  }
  
  .colorB {
    color:  #B7E2FF;
  }
  
  .backgroundA {
    background-color: #4581cf;
  }
  
  .backgroundB {
    background-color:  #B7E2FF;
  }
  </code></pre>