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

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 2

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>

Answer 3

The scope of the variable height is the body of the do..while loop. The condition of this loop is outside of the body, therefore height is not in scope in the loop condition.

Move the definition of height outside of the loop.

int height;
do
{
    //ask for input with 1-8
    height = get_int("Height: ");
}
while (height > 0);

Answer 4

Height is not visible (nor exists) after the closing brace of the do body block. You must declare it outside of the loop. I've marked the points where height ceases to exist in comments below:

int main(void)
{
    do
    {
        //ask for input with 1-8
        int height = get_int("Height: ");
    } // <- the scope and visibility of height ends here
    while (height > 0); // ... so it doesn't exist here.
}

the solution is to declare height before the do keyword, as in:

int main(void)
{
    int height;
    do
    {
        //ask for input with 1-8
        height = get_int("Height: ");
    }
    while (height > 0); // now, height is visible here.
} // <-- visibility and scope of height ends here.

Another thing is that, if your intention is to ask for a height and repeat the question until height > 0, then you should write while (height <= 0) instead, (you repeat the question while the answer is not correct)

Answer 5

EDIT: It has been pointed out to me that I misread your loop’s termination condition. (Sorry, insomnia.)

Possible Answer 1

As I read it, you appear to want to repeatedly do something with positive values of height, and terminate when an invalid value is given.

To make that happen, the correct thinking on this should be:

1. Get a value
2. If the value is zero, terminate the loop
3. Else do stuff with the value

Hence:

while (true)
{
  int height = get_int("Height: ");
  if (height <= 0) break; // invalid height terminates loop

  // use height here //
}

Possible Answer 2

If your desire is to repeatedly ask for a height until the user gives you a valid value in order to continue, then the only answer is to move the value declaration out of the loop, as anything declared local to the loop will not be usable outside of the loop:

int height;
do {
  height = get_int("Height: ");
} while (height is not valid);

// use height here //

This is exactly as Luis Colorado explains, because he was awake enough to properly read your loop condition.

Useful stuff for C++ people finding this by title only

As I had previously misread the solution to terminate if height becomes zero (a common semaphore for homework problems involving integers), and because C++ people will also find this answer, I had also given a C++ solution where the condition and body share locality as follows:

In current versions of C++ you can integrate the variable into the loop condition:

while (int height = get_int("Height: "))
{
  // use height here //
}

I think this is true of C++11 or later, but it might have been introduced in C++14, IDK and don’t care to look it up. You should be using nothing less than C++17 these days...

This solution only works for variables that can be converted to truthy values — in this case, the loop terminates when height is zero.

In OP’s particular case, this won’t work.

Now go vote for Mr Colorado’s answer, because it explains the locality problem better.