javascript - 当我在表单中输入内容时，它返回为未定义

Question

function outputItem() {
  var x = document.getElementById("form1");
  var item = x.elements["item"].value ;
  document.getElementById("output").innerHTML = item ;
}

<div>
  <p id="output"></p>
</div>
<form id="form1">
  item: <input name="item" type="text" size="20">
</form>
<button onclick="outputItem()">Add</button>

Answer 1

elements 是一个包含表单中所有表单控件的 NodeList。

通常，它会有一个名为 foo 的属性，以配合带有 name="foo" 的表单控件。

但是，您使用的名称 item 具有 predefined value on NodeList因此，当您访问它时，您获得的是该功能，而不是表单控件。

如果您使用 console.log(x.elements["item"]) 调试代码，这会更加明显。

---

避免使用 elements 节点列表。使用其他东西，例如 querySelector。

function outputItem() {
  var item = document.querySelector('#form1[name="item"]'].value ;
  document.getElementById("output").innerHTML = item ;
}