Select option onclick change font-family

Question

I have a plain contenteditable with the id 'editor1' that allows users to input whatever text they want. I also have a select tag that contains the different options, where each option is a different font family.

What I did was, I called a function when the user clicks an option, which wraps the selected text in span and changes its font-family accordingly. Unfortunately it doesn't work; anyone have a working solution? (Preferably pure 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: I read somewhere that using onclick with option wouldn't work; rather I should be using onchange inside select. Any ideas on how I could go about doing this?

Answer 1

I think this is the easy way :)

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>

Answer 2

In the Javascript section, there is a function that runs when the value of the <select> element is changed, the function reacts accordingly and changes the font face. Of course, you could make it even easier by making the <option> values the names of the fonts (in this case, Ubuntu and Overpass) and change the if statement to a simple document.body.style.fontFamily = "'"+ff+"', sans-serif";.

var ff;

function font() {
  ff = document.getElementById('ff').value;
  if (ff = 'u') {
    document.body.style.fontFamily = "'Ubuntu', sans-serif";
  } else {
    document.body.style.fontFamily = "'Overpass', sans-serif";
  }
}

body {
  background: #121212;
  color: white;
  font-family: 'Overpass', sans-serif;
  max-width: 500px;
  margin: 0.01em auto;
}

select {
  font-family: 'Overpass', sans-serif;
  font-size: 1em;
  background: rgb(30, 30, 30);
  border: none;
  color: #ffffff;
  padding: 4px;
  border-radius: 5px;
  transition: 0.5s;
}

select:hover {
  background-color: rgb(50, 50, 50);
}

option#o {
  font-family: 'Overpass', sans-serif;
}

option#u {
  font-family: 'Ubuntu', sans-serif;
}

.body {
  background: rgb(30, 30, 30);
  border-radius: 10px;
  padding: 7px;
}

body::-webkit-scrollbar {
  width: 1em;
  border-radius: 5px 0px 5px 0px;
}

body::-webkit-scrollbar-track {
  background: #121212;
  border: none;
}

body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}

<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<br>
<label for='ff'>Choose an option and see how the content changes: </label>
<select id='ff' onchange='font()'>
  <option id='o' value='o'>Overpass</option>
  <option id='u' value='u'>Ubuntu</option>
</select>
<br>
<br>
<div class='body'>
  <span style='font-size:1.1em;background:rgb(30,30,30);'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, quam sit amet bibendum aliquet, nisl lacus mollis dui, eget scelerisque lacus diam in enim. Curabitur lobortis odio sed neque euismod, ac ultrices urna condimentum. Maecenas mauris ex, tincidunt quis feugiat eu, vestibulum quis ligula. Nulla nec nulla rutrum, condimentum metus sit amet, malesuada risus. Proin ultrices condimentum dignissim. Praesent eget ipsum maximus, semper dolor vitae, aliquet justo. Curabitur rutrum, lectus in ultrices consequat, lectus sem commodo ante, non placerat odio augue quis tortor. Nam tincidunt metus in augue tempus, vitae venenatis mauris porta. Donec ligula odio, facilisis vel tortor a, congue suscipit velit.</span>
</div>
<br>

Answer 3

hay  You Can try that code mabe can help You:-
    
    
    <h1 id="txt">TEXT NODE</h1><br><br>
    
    <select id="fontFamily" onchange="setFont()">
    <option value="Times New Roman">Times New Roman</option>
    <option value="Arial">Arial</option>
    <option value="fantasy">Fantasy</option>
    <option value="cursive">cursive</option>
    <option value="monospace" selected>monospace</option>
    <option value="serif">serif</option>
    <option value="Impact">Impact</option>
    <option value="Jazz LET, fantasy">Jazz LET, fantasy</option>
    <option value="Chalkduster">Chalkduster</option>
    </select><br>
<input type="range" id="fontSize" value="0" min="0" max="100" oninput="setFont()">
    <script>
    function setFont() {
    
    document.getElementById('txt').style.fontFamily= document.getElementById('fontFamily').value;
document.getElementById('txt').style.fontSize= document.getElementById('fontSize').value;
    }
    </script>