JavaScript实现颜色翻转器点击按钮无法切换背景色问题排查

你的代码有两个直接导致功能失效的问题：

• 函数未正确调用：取值时写的colors[getRandomItem]没有给函数加执行括号()，这里拿到的是函数本身的引用，不是函数执行后返回的随机数组索引，最终取到的数组值是undefined，无法设置为背景色。
• 脚本加载时机错误：你把引入JS的<script>标签放在了body最顶部，JS执行时页面上的按钮、颜色展示span等DOM元素还没渲染完成，getElementById、querySelector都拿不到对应节点，点击事件绑定直接失败，点击按钮不会触发任何逻辑。

最简修正方案 #

1. 把JS里取随机值的行改成调用函数的写法：

// 原错误写法：const randomItem = colors[getRandomItem];
const randomItem = colors[getRandomItem()];

2. 把HTML里的script标签移到</body>闭合标签之前，等所有DOM元素渲染完成后再加载JS，不需要额外加DOM加载监听即可正常运行，调整后HTML结构如下：

<body>
    <nav>
        <div class="nav-center">
            <h4>color flipper</h4>
            <ul class="nav-links">
                <li><a href="index.html">simple</a></li>
                <li><a href="hex.html">hex</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="container">
            <h2>background color : <span class="color">#f1f5f8</span></h2>
            <button class="btn btn-hero" id="btn">click me</button>
        </div>
    </main>
    <!-- 脚本移到所有页面元素末尾 -->
    <script src="app.js"></script>
</body>

修正后完整可运行的JS代码：

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];

const button = document.getElementById("btn");
const color = document.querySelector(".color");

button.addEventListener("click", function () {
  const randomItem = colors[getRandomItem()];
  document.body.style.backgroundColor = randomItem;
  color.textContent = randomItem;
});

const getRandomItem = function () {
  return Math.floor(Math.random() * colors.length);
}

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