オプションを選択してくださいonclick change font-family

Question

私は、ユーザが任意のテキストを入力できるid 'editor1'を持つプレーンcontenteditableを持っています。また、別のoptionsを含むselectタグがあります。各オプションは異なるフォントファミリです。

私がしたことは、ユーザーが選択したテキストをラップしてspanにラップし、それに応じてフォントファミリを変更するオプションをクリックしたときに関数を呼び出したことです。残念ながら、それは動作しません。誰でも実用的なソリューションを持っていますか？ （好ましくは純粋ジャバスクリプト）

HTML：

 <select> 
      <option onselect="usecomicsans()" style="font-family: 'Comic Sans MS'">Comic Sans MS</option> 
      <option onselect="usearial()" style="font-family: Arial">Arial</option> 
     </select> 

JS：

 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); 
    } 
    } 

編集：私はoptionとonclickは動作しません使用していることをどこかで読ん;むしろ、私はをselectの中に使用するべきです。どのように私はこれを行うことについて行くことができるかについての任意のアイデア？

Answer 1

私は例えばfont- ...これは簡単な方法:) jsの中

HTML

<div id="output-text"> 
    Hello Bros, welcome to the world 
</div> 
    <select id="input-font" class="input" onchange="changeFont (this);"> 
     <option value="Arial">Arial</option> 
     <option value="Comic Sans MS">Comic Sans MS</option> 
    </select> 
<br> 

Javascriptを

<script> 
    function changeFont(font){ 
     document.getElementById("output-text").style.fontFamily = font.value; 
    } 
</script>