Option auswählen onclick change-family ändern

Question

Ich habe eine einfache contenteditable mit der ID 'editor1', mit der Benutzer den gewünschten Text eingeben können. Ich habe auch ein select Tag, das die verschiedenen options enthält, wobei jede Option eine andere Schriftfamilie ist.

Ich habe eine Funktion aufgerufen, wenn der Benutzer auf eine Option klickt, die den ausgewählten Text in span umschließt und seine Schriftfamilie entsprechend ändert. Leider klappt es nicht; hat jemand eine funktionierende Lösung? (Vorzugsweise reines Javascript)

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

EDIT: Ich habe irgendwo gelesen, dass die Verwendung von onclick mit option nicht funktionieren würde; eher sollte ich onchange innerhalb select verwenden. Irgendwelche Ideen, wie ich das machen könnte?

Answer 1

Ich denke, das der einfache Weg ist :)

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>