title: Select option onclick change font-family
body: <p>I have a plain <code>contenteditable</code> with the id 'editor1' that allows users to input whatever text they want. I also have a <code>select</code> tag that contains the different <code>options</code>, where each option is a different font family. </p>
  
  <p>What I did was, I called a function when the user clicks an option, which wraps the selected text in <code>span</code> and changes its font-family accordingly. Unfortunately it doesn't work; anyone have a working solution? (Preferably pure javascript)</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;select&gt;
              &lt;option onselect="usecomicsans()" style="font-family: 'Comic Sans MS'"&gt;Comic Sans MS&lt;/option&gt;
              &lt;option onselect="usearial()" style="font-family: Arial"&gt;Arial&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>        function usecomicsans(){
      {
          var selection= window.getSelection().getRangeAt(0);
          var selectedText = selection.extractContents();
          var span = document.createElement("span");
          span.style.fontFamily = "Comic Sans MS";
          span.appendChild(selectedText);
          selection.insertNode(span)
      }
      }
  
      function usearial(){
      {
          var selection= window.getSelection().getRangeAt(0);
          var selectedText = selection.extractContents();
          var span = document.createElement("span");
          span.style.fontFamily = "Arial";
          span.appendChild(selectedText);
          selection.insertNode(span);
      }
      }
  </code></pre>
  
  <p>EDIT: I read somewhere that using <code>onclick</code> with <code>option</code> wouldn't work; rather I should be using <code>onchange</code> inside <code>select</code>. Any ideas on how I could go about doing this?</p>