Question

未捕获的类型错误：无法为输入字段设置未定义的属性“值”

2020-02-15

1041

javascript

我有这个代码：

var username = 'xyz';
var password = 'xyz';
var input = document.getElementsByClassName('_2hvTZ pexuQ zyHYP');
var button = document.getElementsByClassName('sqdOP L3NKy y3zKF');
input[0].value = username;
input[1].value = password;
button.click();

每次我都收到此错误，但在控制台中，可以在 dom 中找到两个输入字段。

Uncaught TypeError: Cannot set property 'value' of undefined

我能够获取这两个元素的 HTML 集合数组。

这是它们的 outerHTML：

<input aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" class="_2hvTZ pexuQ zyHYP" value=""> 

<input aria-label="Numero di telefono, nome utente o e-mail" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" class="_2hvTZ pexuQ zyHYP" value="">"

这是控制台的屏幕

有什么解决办法吗？

Answer 1

类名不能包含空格。如果您要查找具有每个空格分隔的类的元素，请使用 querySelectorAll 而不是 getElementsByClassName ：

const input = document.querySelectorAll('._2hvTZ.pexuQ.zyHYP');
const button = document.querySelectorAll('.sqdOP.L3NKy.y3zKF');

如前所述，由于 button 将是一个类似数组的 NodeList ，它没有 click() 方法。

以下是您在注释中添加的 HTML 的示例：

const input = document.querySelectorAll('._2hvTZ.pexuQ.zyHYP');

console.log(input.length); // let's see how many there are
input[0].value = "I'm here";
input[1].value = "and here";

<input aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" class="_2hvTZ pexuQ zyHYP" value="">
<input aria-label="Numero di telefono, nome utente o e-mail" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" class="_2hvTZ pexuQ zyHYP" value="">

Answer 2

为此，我认为您可能希望通过 id 而不是 class 来访问字段。您这样做的编程方式并不好。

此外，在尝试访问数组的第二个元素之前，您应该始终检查数组是否至少包含 2 个元素。

还有一件事……“button”不是一个数组吗？（对于数组来说，这是一个不好的名字）不确定 button.click() 是否有意义。