Change Font by Option Dropdown Javascript

Question

I'm trying to change the font of a div with an option selector.

so i have the div with the text "hello folks" and i want to change the font-family either font1 or font2 (or font3)

But i can't imagine a right way and i'm getting really confused whether to define styles by css classes or by javascript referenc. could anybody help me??

 <div id="output-text">
  hello folks 
</div

  <label for="input-font">
Font
</label>
<br>
<select id="input-font" class="input"  onchange="changeFont (this);" size="2">

  <option selected ="selected"/>
  Helvetica

  <option />
  Arial

</select>
<br>

a simple change font script would be this, but i cant bring them together with that options dropdown

function changeFont(){
    var userInput = document.getElementById('input-font').value;
    document.getElementById('output_font').innerHTML = userInput;

}

but i guess i'm totally wrong here

http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript — Marc B, Dec 16 '14 at 15:39
Add the function you've written (`changeFont()`). Also, on a side note, you may want to test with something other than helvetica and arial as your options--you may not see much difference. — Ted, Dec 16 '14 at 15:42

Shaunak · Accepted Answer · 2014-12-16T16:39:21.707

Here's your example cleaned up and working.

<div id="output-text">
  hello folks 
</div>

<select id="input-font" class="input"  onchange="changeFont (this);">
      <option value="Times New Roman" selected ="selected">Times New Roman</option>
      <option value="Arial">Arial</option>
</select>

JavaScript

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("output-text").style.fontFamily = font.value;
}

Now you can add as many fonts in the dropdown list in the HTML and it will work.. Working example here:

JSFIDDLE

score 2 · Answer 2 · edited Jun 02 '22 at 10:11

2

As you haven't posted the changefont() function I can't see what have you tried in your code. As in your question:

Change Font by Option Dropdown Javascript

You can just create an element with an and and change its font size like

    document.getElementById("theid").style.fontFamily = "Arial";

You can use selectedIndex property to fetch the selected value from dropdown.

More info about selecting value from a dropdown is given here.

edited Jun 02 '22 at 10:11

halfer

19,824
17
99
186

answered Dec 16 '14 at 15:42

Avinash Babu

6,171
3
21
26

I think @user2607713 also wants to know how to get the "Arial" part - that is, how to use the selected item from the drop-down list. – alex Dec 16 '14 at 15:49
i can undestand the principle of changing the font like yes… but u don't get how to change it with more options like there's a dropdown list: -arial, -comic sans, -……… (sorry i'm new to it so i'm just totally confused at the moment how count 1+1 together… – user2607713 Dec 16 '14 at 15:56
you do-not need to use selected index. Solution is much simpler, check my answer below. – Shaunak Dec 16 '14 at 15:58

score 1 · Answer 3 · answered Dec 16 '14 at 16:02

This may help

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <script type="text/javascript">
    function changeFont(str){
        document.getElementById("output-text").setAttribute("style", "font-family:"+str+";");
    }
    </script>
    <div id="output-text">
      hello folks 
    </div>

    <label for="input-font">
    Font
    </label>
    <br>
    <select id="input-font" class="input"  onchange="changeFont(this.value);">
      <option value="Georgia" selected ="selected">Georgia</option>
      <option value="Arial" >Arial</option>
    </select>
    </body>
    </html>

JRulle · Answer 4 · 2014-12-16T16:03:34.237

You need to restructure your select a bit (use value="" in the <option> tags to pass font names to javascript -- also your <option> tags needs a bit of work to be propperly formatted HTML) and then define the changeFont() function. JSFIDDLE DEOM

<select id="input-font" class="input"  onchange="changeFont()" size="2">
  <option selected ="selected" value="Helvetica">Helvetica</option>
  <option value="Arial">Arial</option>
  <option value="Times">Times</option>
</select>

function changeFont() {
    var myselect = document.getElementById("input-font");   //get the input element and store in variable 'myselect'
    var font = myselect.options[myselect.selectedIndex].value;   //store the value="" of the selected element in variable 'font'
    document.getElementById("output-text").style.fontFamily = font;   //set 'output-text' element's font-family style to value in 'font' variable
}

alternative changeFont() function with backup font

function changeFont() {
    var myselect = document.getElementById("input-font");  
    var font = myselect.options[myselect.selectedIndex].value;
    font = font + ", sans-serif";  //gives the font variable a backup font in-case the system lacks the selected font
    document.getElementById("output-text").style.fontFamily = font;   
}

Change Font by Option Dropdown Javascript

4 Answers4