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
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
Share Improve this question edited Aug 31, 2022 at 16:27 aynber 23k9 gold badges54 silver badges68 bronze badges asked Dec 16, 2014 at 15:37 user2607713user2607713 1812 silver badges7 bronze badges 4-
10
You didn't post your
changeFontfunction. – j08691 Commented Dec 16, 2014 at 15:39 - stackoverflow./questions/5195303/… – Marc B Commented Dec 16, 2014 at 15:39
-
1
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 Commented Dec 16, 2014 at 15:42 - You have issues in your HTML formatting – JRulle Commented Dec 17, 2014 at 3:11
4 Answers
Reset to default 5Here'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
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.
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>
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;
}