title: Inline onchange script to external JS
body: <p>I have a form selector element, which has an inline script following onchange:</p>
  
  <pre><code>&lt;select onchange="this.className=this.options[this.selectedIndex].className"&gt;
       &lt;option value="select"&gt;Select color&lt;/option&gt;
       &lt;option class="greenOpt" value="green" &gt;Green&lt;/option&gt;
      &lt;option class="yellowOpt"   value="yellow" &gt;Yellow&lt;/option&gt;
      &lt;option class="blueOpt" value="blue" &gt;Blue&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This works perfectly for my output, changing the background color of the options the same color as their word, Green is green, Yellow is yellow, etc.</p>
  
  <pre><code>.greenOpt{
  background-color: green;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }
  
  .blueOpt{
    background-color: blue;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    }
  
  .yellowOpt{
    background-color: yellow;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }
  </code></pre>
  
  <p>But I want to move that <code>onchange</code> script into an external function and I am unsure of how that should look.  I understand what I need to do in the <code>&lt;select&gt;</code> tag, is <code>onchange="colorSel()"</code></p>
  
  <p>My function so far:</p>
  
  <pre><code>function colorSel() {
    var colors = document.getElementById("colors");
    colors = this.className = this.options[this.selectedIndex].className;
    }
  </code></pre>
  
  <p>I am stumped.  I have changed the parameter the of the function and the getElement type to many different things.  I just don't get it.</p>