如何用 JavaScript 实现用户输入五个姓名并按顺序显示在网页上
如何用 prompt() 收集五个姓名并动态渲染到页面？一份实战指南
在前端入门的实践环节里，有一个“经典关卡”：如何从用户那里收集一组数据，存起来，再漂亮地展示出来？听起来基础，但很多新手在第一关就卡住了——变量作用域混乱、DOM元素找不到、代码逻辑“断层”，这些都是常见问题。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
今天，我们就以“收集并显示五个姓名”这个具体任务为例，拆解一套稳健、清晰且具备扩展性的解决方案。从核心思路到完整代码，再到那些容易踩坑的细节，我们一并讲清楚。
✅ 正确实现步骤：四步构建稳健流程
别小看这个简单功能，稳健的实现背后有一套清晰的逻辑。按照下面四步走，不仅能完成任务，代码质量也更有保障。
第一步：为数据找个“家”——声明全局数组
一开始就得规划好数据存放在哪里。使用 const names = [] 声明一个空数组是推荐做法。这里有个细节：const 意味着数组的引用地址不变，但我们依然可以向其中添加或删除元素。如果后续有清空或替换整个数组的需求，那就改用 let。对于当前场景，const 更安全，能避免意外的重新赋值。
第二步：友好地“问”用户——循环调用 prompt()
接下来，需要连续询问五次。一个清晰的 for 循环正合适。关键在于，每次 prompt() 弹窗的提示信息最好带上序号（比如“请输入第1个姓名（共5个）”），这能极大提升用户体验。获取到输入值后，直接用 push() 方法存入数组即可。新手常犯的一个错误是试图用 names[i] = ... 来赋值，这在数组初始为空时会出错，记住push()才是更直接的“添加”操作。
第三步：提前准备好“展示板”——确保DOM容器存在
数据存好了，要展示给用户看。页面上的展示区域必须在脚本运行前就准备好。这意味着你需要在 里提前放置一个带有特定ID（比如 id="display"）的容器元素，例如一个 。否则，脚本中的 document.getElementById('display') 就会返回 null，导致后续操作全部中断。
第四步：安全地“画”出来——动态渲染结果
最后一步是编写展示函数。遍历存储姓名的数组，建议使用数组的 length 属性而非硬编码数字5，这样未来要收集10个、20个名字也无需修改这里。生成HTML时，模板字符串能让你轻松拼接序号和名字。渲染方式上，可以构建 或 元素逐个添加，这样比直接操作 innerHTML 更符合现代最佳实践，也更具语义化。
✅ 完整可运行代码：开箱即用，内含优化
LA4 实验四：姓名收集器
请输入五个姓名
⚠️ 关键注意事项：避开这些常见陷阱
把代码跑起来只是第一步，理解下面这些点才能算真正掌握。