本文介绍如何通过 prompt() 收集五个姓名，将其存储到数组中，并在 html 页面中按输入顺序清晰展示，同时修正原代码中变量作用域、dom 操作和语法逻辑等关键错误。
本文介绍如何通过 prompt() 收集五个姓名，将其存储到数组中，并在 html 页面中按输入顺序清晰展示，同时修正原代码中变量作用域、dom 操作和语法逻辑等关键错误。
要实现“输入五个姓名 → 存储 → 按序显示”这一完整流程，需解决原代码中的多个核心问题：
- 变量作用域混乱：在 fiveNames() 中重复声明 let names，覆盖了全局 names 数组；
- 未定义变量误用：displayNames(name) 调用时 name 未声明，且函数参数名与全局数组名冲突；
-
缺少 DOM 容器：HTML 中无 ，导致 getElementById('display') 返回 null；
- 逻辑错误：displayNames 内部试图 names.push(name)，但 name 未定义，且未读取传入的 namesArr 参数。
以下是修复后的完整、可运行代码（已优化结构与可读性）：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>LA4 — Five Names Collector</title> <script> const names = []; // 使用 const 声明只读引用的数组，确保数据安全 function fiveNames() { names.length = 0; // 清空历史输入，支持多次点击重试 for (let i = 0; i < 5; i++) { const name = prompt(`Enter name #${i + 1} (required):`); // 可选增强：跳过空输入或提示重新输入 if (name === null || name.trim() === '') { alert(`Name #${i + 1} is required. Please try again.`); i--; // 保持当前计数，重新提示 continue; } names.push(name.trim()); // 自动去除首尾空格 } displayNames(names); } function displayNames(namesArr) { const displayEl = document.getElementById('display'); if (!displayEl) return; // 清空旧内容，避免重复追加 displayEl.innerHTML = ''; // 按顺序生成带序号的列表项 namesArr.forEach((name, index) => { const item = document.createElement('p'); item.textContent = `${index + 1}. ${name}`; item.style.margin = '4px 0'; displayEl.appendChild(item); }); } </script> </head> <body> <h1>Lab Activity #4</h1> <h2>Enter Five Names</h2> <button onclick="fiveNames()">Input Names</button> <div id="display" style="margin-top: 20px; padding: 12px; background: #f9f9f9; border-radius: 4px;"></div> </body> </html>✅ 关键改进说明：
- 使用 const names = [] + names.length = 0 实现安全重置，避免多次点击累积数据；
- prompt() 提示含序号（如 name #1），提升用户体验；
- 添加空值校验与友好提示，防止无效输入中断流程；
- displayNames() 采用 createElement 动态构建 DOM，比 innerHTML += 更安全、语义更清晰；
- 为显示区域添加基础样式，使输出更易读。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- prompt() 在现代浏览器中可能被弹窗拦截器屏蔽，仅适用于教学或受控环境；
- 生产环境中建议改用 表单 + 事件监听，以保障兼容性与无障碍访问；
- 若需持久化数据，可结合 localStorage 存储 names 数组（JSON.stringify(names)）。
该方案兼顾功能性、健壮性与教学清晰度，是掌握 JavaScript 数组操作、DOM 动态更新和用户交互流程的理想入门实践。
