使用innerHTML

Question

我正在制作前端ui设计。 我想回应一个选定的字体名称。 我使用了一个标签，其中有多个标签，其值绑定到它们。我希望使用 innerHTML 回显所选选项的值 有人可以帮我解决这个问题吗？提前致谢！ Html代码：

function EchoFontName() {
  var x = document.getElementById("FontSelect").selectedIndex;
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementsByTagName("option")[x].value;
  f.innerHTML = FontNameVar;
}

<div id="MainContainer">
  <div id="Left">
    <p id="FontSettings">Font settings</p>
    <p id="Font">Ab</p>
    <p id="FontName">
      <span id="FontWeight"> </span>
    </p>
  </div>
  <div id="Right">
    <select id="FontSelect" onchange="changeFont(this);">
      <option value="roboto">Roboto</option>
      <option value="lato">Lato</option>
      <option value="raleway">Raleway</option>
      <option value="ubuntu">Ubuntu</option>
    </select>
  </div>
</div>

我已经使用了字体更改脚本，所以不要担心！ ：）

Answer 1

您所要做的就是获取所选选项的值，并在您想要的部分中显示该值。

＆＃13;

＆＃13;

function changeFont(val) {
    console.log(val);
    var f = document.getElementById("FontName");
    f.innerHTML = val;
}

＆＃13;

<div id="MainContainer">
    <div id="Left">
        <p id="FontSettings">Font settings</p>
        <p id="Font">Ab</p>
        <p id="FontName">
            <span id="FontWeight"> </span>
        </p>
    </div>
    <div id="Right">
        <select id="FontSelect" onchange="changeFont(this.value);">
            <option value="roboto">Roboto</option>
            <option value="lato">Lato</option>
            <option value="raleway">Raleway</option>
            <option value="ubuntu">Ubuntu</option>
        </select>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做。

• 使用selectElement.value来获取所选值
• 您的HTML函数名称错误 - changeFont应该是EchoFontName，在这种情况下您不需要将this作为参数传递给该函数
• 如果要添加纯文字
，则应使用textContent代替innerHTML

function EchoFontName() {
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementById("FontSelect").value;
  f.textContent = FontNameVar;
}

<div id="MainContainer">
  <div id="Left">
    <p id="FontSettings">Font settings</p>
    <p id="Font">Ab</p>
    <p id="FontName">
       <span id="FontWeight"></span>
    </p>
  </div>
  <div id="Right">
    <select id="FontSelect" onchange="EchoFontName();">
      <option value="roboto">Roboto</option>
      <option value="lato">Lato</option>
      <option value="raleway">Raleway</option>
      <option value="ubuntu">Ubuntu</option>
    </select>
  </div>
</div>

作为旁注，您不应该使用大写字母来启动函数和变量的名称。以大写字母开头的函数通常指的是构造函数（不是它会改变任何东西，但它可能会引起混淆）。