Change Text Field Font from Dropdown Selection
Question
I am trying to allow a user to select a font from a dropdown list that will change the fontFamily applied to text they've entered in a form text field. I've tried several variations on the following, with no success on Safari or Chrome. I'd appreciate it if someone can point out what I'm doing wrong. Changing colors works. Changing the fontFamily does not.
<html> <head> <script> function setPreview() { var myColor = document.getElementById("selectedColor").value; document.getElementById("inputText").style.color = myColor; var myFont = document.getElementById("selectedFont").value; document.getElementByID("inputText").style.fontFamily = myFont; } </script> </head> <body> <form> <label for="uname">Enter Text: </label> <input type="text" id="inputText" name="name" placeholder="YourName" maxlength="8"> <select name="textColor" id="selectedColor" onchange="setPreview();"> <option value="black" selected="selected">Black</option> <option value="red">Red</option> </select> <select name="textFont" id="selectedFont" onchange="setPreview();"> <option value="Arial" selected="selected">Arial</option> <option value="Impact">Impact</option> <option value="Times New Roman">Times New Roman</option> </select> </form> </body> </html>
2 answers
solution1
3 ACCPTED 2017-11-13 14:50:10
You have a typo
document.getElementByID("inputText").style.fontFamily = myFont;
ID should be Id
updated:
function setPreview() { var myColor = document.getElementById("selectedColor").value; document.getElementById("inputText").style.color = myColor; var myFont = document.getElementById("selectedFont").value; document.getElementById("inputText").style.fontFamily = myFont; }
<label for="uname">Enter Text: </label> <input type="text" id="inputText" name="name" placeholder="YourName" maxlength="8"> <select name="textColor" id="selectedColor" onchange="setPreview();"> <option value="black" selected="selected">Black</option> <option value="red">Red</option> </select> <select name="textFont" id="selectedFont" onchange="setPreview();"> <option value="Arial" selected="selected">Arial</option> <option value="Impact">Impact</option> <option value="Times New Roman">Times New Roman</option> </select>
solution2
2 2017-11-13 14:50:01
Running your code immediately produces an error in your console that:
document.getElementByID is not a function
So, you should know that there is a problem with that. Fix your .getElementByID to: .getElementById .
Now, for best performanc:
Place your script near the end of the document (after the DOM has been parsed) Cache your reference to the element(s) you will work with often Don't set up a variable for a value that you are only going to use once
<html> <head> </head> <body> <form> <label for="uname">Enter Text: </label> <input type="text" id="inputText" name="name" placeholder="YourName" maxlength="8"> <select name="textColor" id="selectedColor" onchange="setPreview();"> <option value="black" selected="selected">Black</option> <option value="red">Red</option> </select> <select name="textFont" id="selectedFont" onchange="setPreview();"> <option value="Arial" selected="selected">Arial</option> <option value="Impact">Impact</option> <option value="Times New Roman">Times New Roman</option> </select> </form> <script> var input = document.getElementById("inputText"); var lstColor = document.getElementById("selectedColor"); var lstFont = document.getElementById("selectedFont"); function setPreview() { input.style.color = lstColor.value; input.style.fontFamily = lstFont.value; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.