javascript - 如何根据表单的内容更改跨度的内容？

Question

通用转换器 - 问题#2

问题 1 - How to input the content of a form as a variable?

你好。我的转换器遇到了更多问题(请参阅链接。)我想知道如何根据表单内部的内容更改跨度的内容(在本例中，查看链接，带有 ID 的表单“单位”)。

它的工作原理是，在函数中调用ID为invalidUnit的span，该函数将用于更改span的内容，以告诉用户他们在表单中输入的单位是否有效或不。

HTML 和 JavaScript 如下。

HTML:

<form>
    <input type="text" id="unit">
</form>
<br>
<button class="btn btn-sm btn-danger" id="confirm">Confirm</button>
<br>
<br>
<h4>Pick two units of <span id="unitType">[?]</span> you want to convert.</h4>
<h5><span id="invalidUnit">[?]</span></h5>

JavaScript:

function invalidUnit() {
    var unitInput = document.getElementById("unit").value;
    var invalid = document.getElementById("invalidUnit");
    if (unitInput.value == "temperature") {
      invalid.innerHTML = ("temperature is a valid unit");
  }
}

那么，我该如何完成这项工作呢？看来我是对的，但是......

Answer 1

更改此:

 var unitInput = document.getElementById("unit").value;

对此:

 var unitInput = document.getElementById("unit");

此外，我认为您需要将 onClick="invalidUnit();" 添加到您的按钮。

Working JSBin