Javascript 输入值未定义？

我试图创建一个函数，根据输入值（user和pass）添加用户，但是我得到了未定义的值

let button=document.getElementById（“寄存器”）；
var数据库=[]；
按钮。addEventListener（“单击”），函数（）{
让user=document.getElementsByClassName（“用户名”）.value；
let pass=document.getElementsByClassName（“密码”）.value；
push（{user，pass}）；
console.log（数据库）
})

输入值未定义？因为

getElementsByClassName（）

返回元素到元素的

数组

，所以要获取第一个元素

文档。getElementsByClassName（“密码”）[0]。值

let button=document.getElementById（“寄存器”）；
var数据库=[]；
按钮。addEventListener（“单击”），函数（）{
让user=document.getElementsByCassName（“用户名”）[0]。值；
let pass=document.getElementsByClassName（“密码”）[0]。值；
push（{user，pass}）；
console.log（数据库）
})

注册

使用下面的代码

let button=document.getElementById（“寄存器”）；
var数据库=[]；
document.getElementById（“提交”）.addEventListener（“单击”），函数（）{
让user=document.getElementById（“用户名”）.value；
let pass=document.getElementById（“密码”）.value；
push（{user，pass}）；
console.log（数据库）
})

提交

首先，您必须知道

getElementsByClassName（）

返回HTMLCollection。这就是为什么

.value

返回未定义的

通过将id应用于元素并通过

getElementById（）

获取数据的最佳实践

因此，您的代码将是：

button.addEventListener("click", function (){
      let user = document.getElementById("myUser").value;
      let pass = document.getElementById("myPass").value;
      dataBase.push({user,pass});
      console.log(dataBase)
})

html是：

<input class="username" id="myUser" type="text" placeholder="Enter username"/>
<input class="password" id="myPass" type="text" placeholder="Enter password"/>

---

当它们返回集合并假设HTML DOM中没有相同类的元素时。

document.getElementsByClassName（“用户名”）

返回元素数组。您需要指定索引以访问相关元素。document.getElementsByClassName（“用户名”）[0]。您可以通过

document.getElementById（“用户名”）.value

.WORKs！，谢谢你，太傻了@Negatiiv非常欢迎您，但如果在HTML DOM中的用户名和密码字段上方有相同类名的元素，则无法使用它。@YatinjSutariya谢谢。是的，如果具有相同类的多个元素需要使用输入id并使用getElementById查找，那么它将不起作用。回答很好，我想说

。querySelector（）

将是

getElementsByClassName（）[0]

的更好选择，因为

querySelector（）

一旦找到元素，将停止遍历DOM，而getElementsByClassName将继续遍历整个DOM中的所有元素，即使您只需要使用第一个元素。谢谢！。是的，

querySelector（）

在这种情况下也很有用。现在一切都讲得通了，非常感谢您的努力

let user = document.getElementsByClassName("username")[0].value;
let pass = document.getElementsByClassName("password")[0].value;