title: How to change the background color of a DIV from a dropdown menu?
body: <p>Is it possible to change the background color of a DIV based on the end-user's selection from a drop down list? For example, I have a drop down menu with  options for blue, green, red, etc. and I would like the DIV background color to be whatever the user selects. Here is what i tried but I cannot figure out how to get it it work:</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;style&gt;
  div.results{
  position: relative;
  left: 300px;
      height: 200px;
      width: 200px;
      border: 1px solid;
      color: black;
  }
  &lt;/style&gt;
  
  &lt;script&gt;// this script will place the background image.
  
  function selectBackground(){
      var e = document.getElementById("selector");
      var BackgroundValue = e.options[e.selectedIndex].value;
      document.getElementById("PreviewResults").style.background-color= BackgroundValue;
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="selectors"&gt;
      &lt;select id=selector&gt;
          &lt;option&gt;Select Background&lt;/option&gt;
          &lt;option value="blue"&gt;Blue&lt;/option&gt;
          &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
          &lt;option value="green"&gt;Green&lt;/option&gt;
          &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;/select&gt;   
  &lt;button onclick="selectBackground()"&gt;Preview Results&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="results" id="PreviewResults" style="background-color:white;"&gt;
  Results Here
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>