When I enter something into the form, it returns as undefined

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 is a NodeList containing all the form controls in the form.

Normally, it will have a property named foo to go with a form control with name="foo".

However, you are using the name item which has a predefined value on NodeList so when you access it you get that function and not the form control.

This would have been more obvious had you debugged the code with console.log(x.elements["item"]).

---

Avoid using the elements NodeList. Use something else, such as querySelector instead.

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

Answer 2

use :

 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>