修复JavaScript代码：实现Prompt输入5个姓名的顺序显示功能

原代码存在多处逻辑和结构错误，导致无法正常存储并显示输入的姓名：

• 变量重复声明：全局names数组被fiveNames函数内的let names覆盖，输入的姓名无法存入全局数组
• 逻辑错误：console.log(i, names[i])中，names是单个姓名字符串，取names[i]会得到字符串的第i个字符，而非数组元素
• 提前调用函数：页面加载时就调用displayNames(name)，此时既无输入的姓名，name变量也未定义
• 显示函数逻辑混乱：displayNames未使用传入的数组参数，反而向数组中push未定义的name，且没有向页面添加元素的代码
• DOM元素缺失：页面中没有用于显示姓名的id="display"容器
• HTML结构错误：存在重复的</script>标签，script标签位置不符合规范

修复后的完整代码 #

<html>
  <head>
    <title>LA4</title>
  </head>
  <body>
    <h1>Lab Activity #4</h1>
    <h2>Enter Five Names</h2>
    <button onclick="fiveNames()">Input Names</button>
    <!-- 新增显示姓名的容器 -->
    <div id="display"></div>

    <script type="text/javascript">
      // 全局数组存储姓名
      let names = [];

      function fiveNames() {
        // 清空之前的输入，避免重复添加
        names = [];
        for (let i = 0; i < 5; i++) {
          // 获取输入的姓名，并存入全局数组
          let inputName = prompt(`Enter name ${i + 1}:`);
          names.push(inputName);
        }
        // 输入完成后调用显示函数
        displayNames();
      }

      function displayNames() {
        const displayContainer = document.getElementById('display');
        // 清空容器之前的内容
        displayContainer.innerHTML = '';
        
        // 遍历姓名数组，逐个添加到页面
        names.forEach((name, index) => {
          const nameElement = document.createElement('p');
          nameElement.textContent = `${index + 1}. ${name}`;
          displayContainer.appendChild(nameElement);
        });
      }
    </script>
  </body>
</html>

关键修改说明 #

• 移除fiveNames内的let names，改用inputName存储单次输入，将结果push到全局names数组
• 输入完成后才调用displayNames函数，确保有数据可显示
• 在页面中添加id="display"的div容器，用于承载显示的姓名
• displayNames函数先清空容器内容，再遍历names数组，创建DOM元素逐个添加到页面
• 修正HTML结构，将script标签放在body末尾，确保DOM加载完成后再执行脚本
• 优化prompt提示，显示当前输入的是第几个姓名，提升用户体验

内容的提问来源于stack exchange，提问作者opalitez