javascript - 选择选项 onclick 更改字体系列

Question

我有一个简单的 contenteditable，id 为“editor1”，允许用户输入他们想要的任何文本。我还有一个 select 标签，其中包含不同的 options，其中每个选项都是不同的字体系列。

我所做的是，当用户单击一个选项时我调用了一个函数，该函数将所选文本包装在 span 中并相应地更改其字体系列。不幸的是，它不起作用；有人有可行的解决方案吗？ (最好是纯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);
    }
    }

编辑:我在某处读到，将onclick 与option 一起使用是行不通的；相反，我应该在 select 中使用 onchange。关于我如何去做这件事有什么想法吗？

Answer 1

我认为这是简单的方法:)

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>