JS实现点击按钮将用户输入存入数组并渲染到div的问题求助

原有代码核心问题 #

• 校验逻辑没有生效：validate函数校验通过后未返回true，且按钮点击事件中没有判断校验结果，校验失败后仍会执行后续数组操作
• 数组数据缺失：仅向数组中添加了两个预设人物，没有把用户输入的姓名、年龄存入数组
• 无页面输出逻辑：未实现将数组内容渲染到页面output节点的逻辑
• 语法错误：原有addToArray函数缺少闭合的}，运行会报错

完整可运行代码 #

HTML部分 #

<div>
  <input type="text" placeholder="姓名" id="NameInput">
</div>
<div>
  <input type="number" placeholder="年龄" id="AgeInput">
</div>
<div>
  <input type="password" placeholder="密码" id="PasswordInput">
</div>
<button onclick="buttonclick()" type="button">提交</button>
<div id="output"></div>

JS部分 #

function buttonclick() {
  // 只有校验通过才执行后续操作
  if (validate()) {
    addToArray();
  }
}

function validate() {
  var name = document.getElementById("NameInput");
  var age = document.getElementById("AgeInput");
  var password = document.getElementById("PasswordInput");
  // 判空校验，加trim避免空格视为有效输入
  if (name.value.trim() == "" || password.value.trim() == "" || age.value.trim() == "") {
    alert("所有字段均为必填项");
    return false;
  }
  // 密码校验
  if (password.value !== "IHM") {
    alert("密码无效");
    return false;
  }
  // 所有校验通过返回true
  return true;
}

function addToArray() {
  let persons = [];
  // 预设人物数据
  let person1 = {
    Uname: "Marcus",
    Uage: 34
  }
  let person2 = {
    Uname: "Cihan",
    Uage: 35
  }
  // 构造用户输入的人物对象，年龄转为数字类型
  let userPerson = {
    Uname: document.getElementById("NameInput").value,
    Uage: Number(document.getElementById("AgeInput").value)
  }
  // 把用户数据和预设数据都加入数组
  persons.push(userPerson, person1, person2);
  // 若需要按年龄排序可开启下行代码，对象直接调用sort()无法生效
  // persons.sort((a, b) => a.Uage - b.Uage);
  
  // 构造输出内容
  let outputHtml = "<h3>所有人员信息</h3><ul>";
  persons.forEach(item => {
    outputHtml += `<li>姓名：${item.Uname}，年龄：${item.Uage}</li>`;
  })
  outputHtml += "</ul>";
  // 渲染到页面
  document.getElementById("output").innerHTML = outputHtml;
}

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