javascript - 如何将表单的内容作为变量输入？

Question

我正在使用 HTML 和 JavaScript 创建一个通用转换器作为学校项目，并且要将两个单位(例如英尺)转换为英里，您首先必须将要转换的内容输入到表单中。然后，当点击“确认”按钮时，[此时，因为您还无法转换内容]它应该将 HTML 中的跨度值更改为表单中输入的值。

但是现在，当单击按钮时，无论在表单中输入什么内容，跨度的值总是会更改为“[object HTMLInputElement]”。

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>

JavaScript:

document.getElementById("confirm").onclick = function() {
    var unitInput = document.getElementById("unit");
    var unitType = document.getElementById("unitType");
    unitType.innerHTML = unitInput;
};

谢谢。

Answer 1

您需要输入的值。变化:

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

至:

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

<强> jsFiddle example