本文手把手教你用 JavaScript 实现一个简洁实用的“五人姓名收集与展示”功能：通过 prompt() 依次输入五个姓名，自动去除空格并校验有效性，安全存储到数组中，再动态创建带序号的 DOM 元素清晰显示在页面上；不仅提供了完整可运行的修复代码，还深入剖析了变量作用域混乱、DOM 获取失败、参数误用等初学者常见错误，并给出生产环境优化建议（如改用表单、支持 localStorage），是理解数组操作、用户交互与 DOM 更新逻辑的绝佳入门实践。

本文介绍如何通过 prompt() 收集五个姓名，将其存储到数组中，并在 HTML 页面中按输入顺序清晰展示，同时修正原代码中变量作用域、DOM 操作和语法逻辑等关键错误。

本文介绍如何通过 prompt() 收集五个姓名，将其存储到数组中，并在 HTML 页面中按输入顺序清晰展示，同时修正原代码中变量作用域、DOM 操作和语法逻辑等关键错误。

要实现“输入五个姓名 → 存储 → 按序显示”这一完整流程，需解决原代码中的多个核心问题：

• 变量作用域混乱：在 fiveNames() 中重复声明 let names，覆盖了全局 names 数组；
• 未定义变量误用：displayNames(name) 调用时 name 未声明，且函数参数名与全局数组名冲突；
• 缺少 DOM 容器：HTML 中无
  ，导致 getElementById('display') 返回 null；
• 逻辑错误：displayNames 内部试图 names.push(name)，但 name 未定义，且未读取传入的 namesArr 参数。

以下是修复后的完整、可运行代码（已优化结构与可读性）：

  
  
  


  
Lab Activity #4
  
Enter Five Names
  Input Names
  

✅ 关键改进说明：

• 使用 const names = [] + names.length = 0 实现安全重置，避免多次点击累积数据；
• prompt() 提示含序号（如 name #1），提升用户体验；
• 添加空值校验与友好提示，防止无效输入中断流程；
• displayNames() 采用 createElement 动态构建 DOM，比 innerHTML += 更安全、语义更清晰；
• 为显示区域添加基础样式，使输出更易读。

⚠️ 注意事项：

• prompt() 在现代浏览器中可能被弹窗拦截器屏蔽，仅适用于教学或受控环境；
• 生产环境中建议改用 表单 + 事件监听，以保障兼容性与无障碍访问；
• 若需持久化数据，可结合 localStorage 存储 names 数组（JSON.stringify(names)）。

该方案兼顾功能性、健壮性与教学清晰度，是掌握 JavaScript 数组操作、DOM 动态更新和用户交互流程的理想入门实践。

终于介绍完啦！小伙伴们，这篇关于《输入五人姓名并显示教程详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！