如何用 JavaScript 实现用户输入五个姓名并按顺序显示在网页中-html教程-PHP中文网

如何用 JavaScript 实现用户输入五个姓名并按顺序显示在网页中

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

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

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

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

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



  <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><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>

✅ 关键改进说明：