152

考虑这个函数：

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

而这个 HTML 部分：

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

警告框正在显示，但它显示“未定义”。

4

7 回答 7

288

您看到该错误的原因是document.getElementsByName返回 a NodeListof 元素。并且 a NodeListof 元素没有.value属性。

改用这个：

document.getElementsByName("acc")[0].value
于 2012-04-24T21:19:27.553 回答
34

请注意此方法中的复数：

document.getElementsByName()

它返回一个元素数组，所以使用 [0] 来获得第一次出现，例如

document.getElementsByName()[0]
于 2012-04-24T21:21:12.170 回答
15

你要这个：

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}
于 2012-04-24T21:20:23.000 回答
15

这里的所有答案似乎都已过时。请立即使用：

document.querySelector("[name='acc']");
document.querySelector("[name='pass']")
于 2021-02-10T07:31:27.713 回答
8

方法 document.getElementsByName 返回一个元素数组。例如，您应该首先选择。

document.getElementsByName('acc')[0].value
于 2012-04-24T21:21:38.447 回答
6 
document.getElementsByName("myInput")[0].value;
于 2012-04-24T21:20:47.793 回答
0

只是为了完整起见，因此阅读本文的其他人对安全网有很好的了解，尤其是在不能保证获得所需元素的情况下，您可以测试缺失值，使用 null coalesce 设置默认值：

const accElements = document.getElementsByName('acc');
const accElement = accElements[0] ?? null; // Or some other value
if (!accElement) {
    // handle the problem
}

并在连接对象（而不是返回的数组/节点）时使用可选链接：

const acc = document.getElementById('acc')?.value ?? null; // Or some other value

此外，虽然name属性有时是所有可用的，但请尽可能尝试使用id，因为它们更有可能成为唯一的。假设您想要的元素在结果索引 0 ( [0]) 中通常是安全的，但最好检查并确定。只需几行代码（可能还有一些日志记录），您就可以为您的最终用户避免出现问题的问题。

于 2021-12-06T15:46:27.847 回答