JavaScript新手求助：实现HTML列表项动态添加与展示功能

嘿，作为JavaScript新手碰到这些困惑太正常了！我帮你把代码里的问题一一理顺，然后给出能正常工作的完整版本，每一步都会讲清楚为什么这么做～

首先，先说说你现有代码里的几个关键问题：

• getElementById必须前面加document.，不然JS找不到这个方法
• 表单的输入框没有唯一标识（比如id），没法获取用户填写的内容
• 你定义的contact构造函数属性名有点混乱（比如把姓氏叫relation，邮箱叫number），会让后续逻辑更绕
• 表单提交的处理函数processMyForm根本没实现，而你在表单里已经写了这个绑定
• 遍历数组的语法完全错了，还有拼写错误innerHTMl（应该是innerHTML）

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Contact Manager</title>
</head>
<body>
    <div id="main">
        <div id="form1">
            <form id="entry" onsubmit="return processMyForm();">
                <h3 id="mailing">Get added to the guest book!</h3>
                First Name: <input class="input" id="firstName" required>
                <br>
                <br>
                Last Name: <input class="input" id="lastName" required>
                <br>
                <br>
                Email address: <input class="input" id="email" type="email" required>
                <br>
                <br>
                <button type="submit" id="submit">Click here to submit info</button>
            </form>
        </div>
        <br>
        <br>
        <div id="signed">
            <h1 id="pageTitle">Guest Book</h1>
            <ul id="names">
                <li>Erik Pauze</li>
            </ul>
        </div>
    </div>
</body>
<foot>
</foot>
</html>

JavaScript部分

// 1. 获取页面上需要用到的DOM元素
const nameList = document.getElementById("names");
const firstNameInput = document.getElementById("firstName");
const lastNameInput = document.getElementById("lastName");
const emailInput = document.getElementById("email");

// 2. 初始化存储联系人的数组，默认包含初始的示例数据
const contacts = [
  { givenName: "Erik", familyName: "Pauze", email: "" }
];

// 3. 表单提交的核心处理函数
function processMyForm() {
  // 阻止表单默认的刷新页面行为——这是关键！不然提交后页面会重置
  event.preventDefault();

  // 4. 获取用户输入的内容，trim()去掉前后多余空格
  const givenName = firstNameInput.value.trim();
  const familyName = lastNameInput.value.trim();
  const email = emailInput.value.trim();

  // 简单校验：确保姓名不为空（HTML的required属性也会帮我们做基础校验）
  if (!givenName || !familyName) {
    alert("请填写完整的姓名！");
    return false;
  }

  // 5. 创建新的联系人对象，添加到数组里
  const newContact = { givenName, familyName, email };
  contacts.push(newContact);

  // 6. 把新联系人追加到页面的列表中
  addContactToList(newContact);

  // 7. 清空输入框，方便用户继续提交
  firstNameInput.value = "";
  lastNameInput.value = "";
  emailInput.value = "";

  return false;
}

// 8. 封装函数：把单个联系人添加到页面列表
function addContactToList(contact) {
  const li = document.createElement("li");
  // 拼接姓名显示，邮箱可以根据需求决定是否展示
  li.innerHTML = `${contact.givenName} ${contact.familyName}`;
  nameList.appendChild(li);
}

关键知识点解释 #

1. 给输入框加id：通过document.getElementById能精准定位每个输入框，获取用户输入的内容是交互的基础
2. 阻止表单默认行为：event.preventDefault()避免了提交后页面刷新，刚添加的内容才不会消失
3. 用数组存储数据：数组contacts保存所有提交的联系人信息，后续如果要做编辑、删除等功能，都可以基于这个数组操作
4. 封装函数：把添加联系人到列表的逻辑单独抽成addContactToList，代码更清晰，也方便后续复用
5. 输入校验与清空：简单的非空校验提升用户体验，提交后清空输入框让操作更流畅

现在你可以测试一下：填写姓名和邮箱，点击提交，新的名字就会实时追加到留言本列表末尾啦！

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