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>

Use the browser console pleaaaaaase ... https://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome — Zakaria Acharki, Nov 13 '17 at 14:52
Thanks for that suggestion. I wasn't aware of the Chrome JavaScript console. I rarely write any JavaScript, or use Chrome. — DenVog, Nov 13 '17 at 16:43

score 3 · Accepted Answer · edited Nov 13 '17 at 15:40

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>

Arggh! Thank you. A case where I stared at it way to long and couldn't see the forest for the trees. — DenVog, Nov 13 '17 at 16:40

Scott Marcus · Answer 2 · 2017-11-13T16:53:42.373

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>

Change Text Field Font from Dropdown Selection

2 Answers2