求助：使用innerHTML展示经.join()转换的数组文本失败

我尝试在switch语句的case 3中，通过innerHTML将数组以文本形式展示出来，但无法正常工作，已经使用.join()方法将数组转换为字符串了。

相关代码 #

JavaScript代码

let userList = ["Sarah", "Bryan", "Scott", "Mirande", "Tamzin", "Tamryn", "Steven", "Peter", "Skippi", "Sheldon"]

let menu = prompt("===== Menu ===== \n" + "What would you like to do?\n\n" + "1.Add three Users\n" + "2.Remove User\n" +
  "3.Display all users \n" + "4.Sort users \n")

let choice = menu;

switch (choice) {

  case '2':
    let removeUser = prompt("Remove User");
    let removed = userList.indexOf(removeUser)
    userList.splice(removed, 1)
    break;

  case '3':
    alert("Users have been displayed");
    let arrayString = userList.join()
    document.querySelector("#display").innerHTML = arrayString
    break;

}

HTML代码

<div class="container">
  <h1>User List Challenge</h1>
  <div id="display"></div>
</div>

问题排查与解决方案 #

1. DOM元素未加载完成（最可能原因）

如果你的JavaScript代码放在HTML的<head>标签中执行，此时浏览器还未解析到<div id="display">元素，document.querySelector("#display")会返回null，自然无法设置innerHTML。

解决方法：

• 将JS代码移到</body>标签之前，确保DOM完全渲染后再执行代码：

<div class="container">
  <h1>User List Challenge</h1>
  <div id="display"></div>
</div>
<!-- 在此处插入JS代码 -->
<script>
// 你的JavaScript代码
</script>
</body>

• 或者用DOMContentLoaded事件包裹代码，等待DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  let userList = ["Sarah", "Bryan", "Scott", "Mirande", "Tamzin", "Tamryn", "Steven", "Peter", "Skippi", "Sheldon"];

  let menu = prompt("===== Menu ===== \n" + "What would you like to do?\n\n" + "1.Add three Users\n" + "2.Remove User\n" +
    "3.Display all users \n" + "4.Sort users \n");

  let choice = menu;

  switch (choice) {
    case '2':
      let removeUser = prompt("Remove User");
      let removed = userList.indexOf(removeUser);
      if (removed !== -1) { // 增加判断，避免删除不存在的元素导致数组出错
        userList.splice(removed, 1);
      }
      break;
    case '3':
      alert("Users have been displayed");
      let arrayString = userList.join('<br>'); // 用<br>分隔，让每个用户单独一行
      document.querySelector("#display").innerHTML = arrayString;
      break;
  }
});

2. 用户输入的选项存在空格导致case不匹配

菜单选项"3.Display all users "末尾带有空格，若用户输入时不小心带入空格（比如输入"3 "），会导致choice值为"3 "，无法匹配case '3'。

解决方法：
对prompt返回的内容做去空格处理：

let choice = menu ? menu.trim() : '';

3. 可选优化：提升展示效果

默认join()用逗号分隔用户，你可以改成换行标签或列表元素，让展示更清晰：

// 用换行分隔每个用户
let arrayString = userList.join('<br>');
// 或者生成无序列表
let arrayString = '<ul>' + userList.map(user => `<li>${user}</li>`).join('') + '</ul>';

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