如何用 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

实验四：姓名收集器

请输入五个姓名

⚠️ 关键注意事项：避开这些常见陷阱

把代码跑起来只是第一步，理解下面这些点才能算真正掌握。

警惕“未定义”错误：原示例代码中，在函数声明之前就调用了 displayNames(name)，且 name 变量当时并未定义，这会导致浏览器抛出 ReferenceError。函数调用必须在函数声明或定义之后。
避免变量“打架”：另一个经典错误是在循环内部用 let names = ... 重新声明了一个同名局部变量，这会把外部的全局数组彻底遮盖，导致数据无法正确存储。记住，在循环内处理的是单次输入的临时变量。
HTML结构是基石：基础结构必须规范。声明必不可少；