title: Changing text color with drop-down box and JavaScript
body: <p>I am trying to make a web page where there is a drop-down box that has a list of colors. Choosing one of the colors will make the sentences(the p's under the code for the drop-down list) change to that color. Everything is fine except that when I choose the color in the drop-down list, the text color does not change.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="colorchange.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;select&gt;
                  &lt;!--This is the drop-down list--&gt;
                  &lt;option id="red" onclick="changeColor()"&gt;Red&lt;/option&gt;
                  &lt;option id="orange" onclick="changeColor()"&gt;Orange&lt;/option&gt;
                  &lt;option id="yellow" onclick="changeColor()"&gt;Yellow&lt;/option&gt;
                  &lt;option id="green" onclick="changeColor()"&gt;Green&lt;/option&gt;
                  &lt;option id="blue" onclick="changeColor()"&gt;Blue&lt;/option&gt;
                  &lt;option id="purple" onclick="changeColor()"&gt;Purple&lt;/option&gt;
              &lt;/select&gt;
          &lt;/form&gt;
          &lt;!--These are the sentences that have to change text color--&gt;
          &lt;p&gt;Sentence 1&lt;/p&gt;
          &lt;p&gt;Sentence 2&lt;/p&gt;
          &lt;p&gt;Sentence 3&lt;/p&gt;
          &lt;p&gt;Sentence 4&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>JavaScript - colorchange.js</h2>
  
  <pre><code>function changeColor() {
      document.getElementById("red")
      document.p.style.color = red;
  
      document.getElementById("orange")
      document.p.style.color = orange;
  
      document.getElementById("yellow")
      document.p.style.color = yellow;
  
      document.getElementById("green")
      document.p.style.color = green;
  
      document.getElementById("blue")
      document.p.style.color = blue;
  
      document.getElementById("purple")
      document.p.style.color = purple;
  }
  </code></pre>
  
  <p>Can someone help me with the code?</p>