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

【问题标题】：Change Text Field Font from Dropdown Selection从下拉选择更改文本字段字体
【发布时间】：2017-11-13 14:46:36
【问题描述】：

我试图允许用户从下拉列表中选择一种字体，该字体将更改应用于他们在表单文本字段中输入的文本的 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>

【问题讨论】：

getElementByID -> getElementById :)
使用浏览器控制台pleaaaaase ... stackoverflow.com/questions/66420/…
感谢您的建议。我不知道 Chrome JavaScript 控制台。我很少编写任何 JavaScript 或使用 Chrome。

标签： javascript html css forms font-family

【解决方案1】：

你有错别字

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>

【讨论】：

啊！谢谢你。一个案例，我盯着它看太久，只见树木不见森林。

【解决方案2】：

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

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>

【讨论】：