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 NodeList。使用其他内容，例如querySelector。

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

Answer 2

使用：

 var item = x.elements.namedItem("item").value ;

function outputItem() {
  var x = document.getElementById("form1");
  var item = x.elements.namedItem("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 3

因为您正在访问错误的元素的值。您应该直接获取要在其中插入值的输入元素。

<!DOCTYPE html>
<html>
<body>
    <div>
        <p id="output"></p>
    </div>
    <form id="form1">
        item: <input id="input1" name="item" type="text" size="20">
    </form>
    <button onclick="outputItem()">Add</button>
</body>
<script type="text/javascript">

    function outputItem() {
        var x = document.getElementById("input1");
        var item = x.value;
        document.getElementById("output").innerHTML = item ;
    }
</script>
</html>

当我在表单中输入内容时，它将返回未定义状态

3 个答案: