如何用JavaScript的类与对象实现多用户输入的输出？

核心问题 #

1. 类实例化参数传递错误：你的person类构造函数需要addFirstName和addLastName两个参数，但创建person1时只传了名字，person2只传了姓氏，导致另一个属性直接是undefined。
2. 内容被覆盖：每次用innerHTML赋值都会替换掉之前的内容，所以最后只能看到最后一次赋值的结果。
3. 类属性不全：表单里还有班级、组别、角色的输入项，但你的person类没定义这些属性，没法存储对应的值。

修正后的代码 #

JavaScript 部分

class Person {
  // 扩展构造函数，包含所有需要存储的属性
  constructor(firstName, lastName, className, section, role) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.className = className;
    this.section = section;
    this.role = role;
  }
}

function displayInfo() {
  // 一次性获取所有输入框的值
  const firstName = document.getElementById("addFirstName").value;
  const lastName = document.getElementById("addLastName").value;
  const className = document.getElementById("addClass").value;
  const section = document.getElementById("addSection").value;
  const role = document.getElementById("addRole").value;

  // 只创建一个实例，传入所有参数
  const user = new Person(firstName, lastName, className, section, role);

  // 拼接所有信息，避免内容被覆盖
  document.getElementById("display").innerHTML = `
    <p>姓名：${user.firstName} ${user.lastName}</p>
    <p>班级：${user.className}</p>
    <p>组别：${user.section}</p>
    <p>角色：${user.role}</p>
  `;
}

// 先获取按钮元素再绑定事件，避免全局变量报错
const showInput = document.getElementById('showInput');
showInput.addEventListener("click", displayInfo);

HTML 部分

原HTML结构无需大改，只需确保按钮的id与JS中获取的一致，同时注意JS文件的引入路径正确即可。

额外提示 #

• 类名建议首字母大写（比如Person），这是JavaScript的编码规范，便于区分普通变量。
• 获取DOM元素的值时，尽量用const或let声明变量，避免意外创建全局变量。
• 如果需要处理输入为空的情况，可以添加简单的校验逻辑，比如判断值为空时提示用户补全。

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