Javascript – Using document.getElementsByName() isn’t working

javascript

The code for the second alert command works as intended (displaying the value of the element "to", but the first alert command does not work (it's supposed to do the same thing). Why is this?

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  alert(document.getElementsByName("to").value);
  alert(document.forms[0].to.value);  
  }
</script>
</head>
<body>
<form>
<input name="to" type="hidden" value="hoolah" />
<input type="button" onclick="getValue()" value="Get Value!" />
<form/>
</body>
</html>

Best Solution

getElementsByName returns an HTMLCollection. You can access the value of the first item like this:

document.getElementsByName("to").item(0).value

Or like this:

document.getElementsByName("to")[0].value

More info: