从下拉选择中更改文本字段字体

Question

我正在尝试允许用户 select 下拉列表中的一种字体，这将更改应用于他们在表单文本字段中输入的文本的 fontFamily。我已经尝试了以下几种变体，但在 Safari 或 Chrome 上都没有成功。如果有人能指出我做错了什么，我将不胜感激。改变颜色有效。更改 fontFamily 不会。

    <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>

Answer 1

运行您的代码会立即在您的控制台中产生一个错误：

document.getElementByID is not a function

所以，你应该知道这是有问题的。将您的 .getElementByID 修正为：.getElementById.

现在，为了获得最佳性能：

将您的脚本放在文档末尾附近（在 DOM 被解析之后）缓存您对经常使用的元素的引用不要为只使用一次的值设置变量

<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>

Answer 2

你打错了

document.getElementByID("inputText").style.fontFamily = myFont;

ID 应该是 Id

更新：

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>

从下拉选择中更改文本字段字体

Change Text Field Font from Dropdown Selection

html

javascript

css

forms

font-family