JS点击按钮展示随机数组内容却显示在按钮上问题求解

你贴出的代码本身逻辑没有问题，正常运行时点击按钮会将随机姓名写入#name容器，不会显示在按钮上。你遇到的异常表现通常由以下两个原因导致：

• 第一个原因是JS加载时机错误
  如果你的JS代码放在<head>标签内，或者写在#name、按钮元素的代码前面，运行JS时DOM还没有完成渲染，document.querySelector("#name")会返回null，无法正确绑定目标容器。如果此时页面存在重复ID的元素，或者有其他变量冲突，就可能出现内容写入位置异常的问题。

解决方法：将所有JS代码移到</body>结束标签的前面，或者用DOM加载完成事件包裹全部JS逻辑，示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  let displayName = document.querySelector("#name");
  let showBtn = document.querySelector("#button");

  let namesArr = [
    "Edward",
    "Rigo",
    "Kevin",
    "Alden",
    "Jeffrey",
    "Maria",
    "Nova",
    "Abby",
  ];

  let nameCalling = () => {
    displayName.innerHTML = namesArr[Math.floor(Math.random() * namesArr.length)];
  };

  showBtn.addEventListener("click", nameCalling);
})

• 第二个原因是本地代码和你贴出的内容不一致
  检查你本地的nameCalling函数，有没有不小心把赋值对象写错成showBtn，如果写成showBtn.innerHTML = 随机姓名，内容就会直接显示在按钮上。

你可以在nameCalling函数第一行添加console.log(displayName)，打开浏览器开发者工具的控制台，点击按钮后查看打印的元素是否是你预期的#name容器，就能快速定位问题：如果打印结果为null就是元素未获取到的问题，如果打印结果是按钮元素，就说明选择器写错或者页面有重复ID。

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