表单数据展示功能调试：JS代码无法渲染表单输入值求助

问题根源 #

原代码存在以下关键错误导致无法正常渲染表单数据：

• text变量仅初始化为空字符串并直接赋值给列表innerHTML，后续生成的列表项未更新到该变量中
• display函数逻辑错误：既没有正确拼接列表项HTML，也没有将结果存入text；同时错误使用转义的</>，无法渲染为真实的<li>标签
• 使用map遍历数组但未利用其返回值，遍历操作完全未对页面内容产生影响

修正后的代码 #

JavaScript代码 #

const store = () => {
    // 获取所有表单字段
    const Email = document.getElementById("inputEmail4");
    const Pass = document.getElementById("inputPassword4");
    const Add1 = document.getElementById("inputAddress");
    const Add2 = document.getElementById("inputAddress2");
    const City = document.getElementById("inputCity");
    const State = document.getElementById("inputState");
    const Zip = document.getElementById("inputZip");
    const Check = document.getElementById("gridCheck");

    // 收集字段值，优化复选框显示文本
    const fieldValues = [
        Email?.value,
        Pass?.value,
        Add1?.value,
        Add2?.value,
        City?.value,
        State?.value,
        Zip?.value,
        Check?.value ? "已勾选" : "未勾选"
    ];

    // 生成列表项HTML字符串，可选过滤空值
    const listItems = fieldValues
        .filter(value => value !== "")
        .map(value => `<li>${value}</li>`)
        .join("");

    // 更新页面列表内容
    document.getElementById("show").innerHTML = listItems;
};

HTML代码（补充表单结构提示） #

<!-- 需确保表单字段id与JS中获取的id完全匹配，示例表单结构如下 -->
<form onsubmit="event.preventDefault(); store();">
    <div>
        <label for="inputEmail4">邮箱</label>
        <input type="email" id="inputEmail4">
    </div>
    <div>
        <label for="inputPassword4">密码</label>
        <input type="password" id="inputPassword4">
    </div>
    <div>
        <label for="inputAddress">地址</label>
        <input type="text" id="inputAddress">
    </div>
    <div>
        <label for="inputAddress2">地址补充</label>
        <input type="text" id="inputAddress2">
    </div>
    <div>
        <label for="inputCity">城市</label>
        <input type="text" id="inputCity">
    </div>
    <div>
        <label for="inputState">州/省份</label>
        <input type="text" id="inputState">
    </div>
    <div>
        <label for="inputZip">邮编</label>
        <input type="text" id="inputZip">
    </div>
    <div>
        <input type="checkbox" id="gridCheck">
        <label for="gridCheck">同意协议</label>
    </div>
    <button type="submit">提交并展示</button>
</form>

<div class="display">
  <ul id="show"></ul>
</div>

关键优化点 #

• 调整变量顺序，保持逻辑一致性
• 将复选框的布尔值转为更友好的文本显示
• 新增空值过滤逻辑（可选），避免生成空列表项
• 使用map生成列表项数组后通过join拼接为完整HTML字符串，一次性更新innerHTML提升性能
• 修复HTML标签转义错误，直接使用<li>确保正确渲染

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