实现用户注册功能时，类名获取输入框值返回undefined的问题

document.getElementsByClassName() 的返回值是匹配指定类名的所有DOM元素组成的类数组集合（HTMLCollection），并非单个DOM元素。你直接对这个集合对象读取.value属性，而集合本身不存在这个属性，最终取到的结果自然是undefined。

原代码的错误写法：

// 错误：直接对类数组集合取value，拿不到输入框的实际值
let user = document.getElementsByClassName("username").value;
let pass = document.getElementsByClassName("password").value;

因为页面上确实存在对应类名的input元素，所以这个调用不会报元素不存在的错误，只会因为读取集合对象上不存在的属性，得到undefined结果。

• 方式1：从类数组集合中按索引取对应元素
  类数组结构可以通过索引拿到集合里的匹配元素，因为页面上的对应输入框是唯一的，取第0个索引的元素即可：

  button.addEventListener("click", function (){
    // 取集合中第一个匹配元素的value
    let user = document.getElementsByClassName("username")[0].value.trim();
    let pass = document.getElementsByClassName("password")[0].value.trim();
    dataBase.push({user,pass});
    console.log(dataBase)
  })
  

• 方式2：改用单元素选择器（更推荐）
  实际开发中更易用的写法是用document.querySelector()，这个API会直接返回匹配选择器的第一个DOM元素，不需要额外处理类数组索引：

  button.addEventListener("click", function (){
    let user = document.querySelector(".username").value.trim();
    let pass = document.querySelector(".password").value.trim();
    // 简单空值校验，避免存无效数据
    if (!user || !pass) {
      alert("用户名和密码不能为空");
      return;
    }
    dataBase.push({user,pass});
    console.log(dataBase)
  })
  

  额外的小优化：把密码输入框的type属性从text改为password，避免用户输入的密码在页面上明文展示。

内容的提问来源于stack exchange，提问作者Negatiiv