HTML注册表单存储数据时浏览器报undefined错误求助

你的问题出在document.getElementsByClassName("loginInfo")的使用上——这个方法返回的是HTMLCollection（类数组对象），包含所有带有loginInfo类的元素，而不是单个DOM元素。集合本身没有.value属性，所以直接访问会得到undefined。

下面是几种可行的解决方法：

方法1：遍历集合获取所有输入值 #

如果要收集所有表单输入的数据，可以遍历这个类数组，把值整理成对象：

function othername() {
  // 获取所有loginInfo类的输入框
  const inputs = document.getElementsByClassName("loginInfo");
  // 创建对象存储数据
  const formData = {};
  // 遍历集合
  for (let input of inputs) {
    // 用输入框的name属性作为键，值作为对应的值
    formData[input.name] = input.value;
  }
  // 弹出整理后的数据，也可以直接使用formData变量
  alert(JSON.stringify(formData));
}

方法2：按索引获取单个输入框的值 #

如果你只需要某个特定输入框的值，可以通过索引访问（索引从0开始）：

function othername() {
  // 获取第一个输入框（邮箱）的值
  const email = document.getElementsByClassName("loginInfo")[0].value;
  // 获取第二个输入框（密码）的值
  const password = document.getElementsByClassName("loginInfo")[1].value;
  alert(`邮箱：${email}，密码：${password}`);
}

更规范的优化方案：使用表单提交事件 #

因为你的按钮是type="submit"，默认会触发表单提交并刷新页面，建议直接给表单绑定submit事件，同时阻止默认行为，这样更符合表单的使用规范：

修改后的HTML（添加form标签）： #

<form id="signupForm">
  <input type="text" class="loginInfo" placeholder="Enter Email" name="email" required>
              
  <label for="psw"><b>Password</b></label>
  <input type="password" class="loginInfo" placeholder="Enter Password" name="psw" required>
              
  <label for="psw-repeat"><b>Repeat Password</b></label>
  <input type="password" class="loginInfo" placeholder="Repeat Password" name="psw-repeat" required>
  
  <div class="clearfix">
    <button type="submit" class="signupbtn">Sign Up</button>
  </div>
</form>

对应的JavaScript： #

// 获取表单元素
const signupForm = document.getElementById("signupForm");
// 绑定submit事件
signupForm.addEventListener("submit", function(e) {
  // 阻止表单默认提交行为（避免页面刷新）
  e.preventDefault();
  // 收集表单数据
  const formData = {};
  const inputs = this.getElementsByClassName("loginInfo");
  for (let input of inputs) {
    formData[input.name] = input.value;
  }
  // 验证两次密码是否一致（可选）
  if (formData.psw !== formData["psw-repeat"]) {
    alert("两次输入的密码不一致");
    return;
  }
  // 这里可以处理数据，比如发送到后端
  alert("注册数据：" + JSON.stringify(formData));
});

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