Javascript实现HTML点击切换背景色功能不生效问题排查

你当前的代码存在两处问题：

• 核心错误：点击事件内的randomNumber被写死为固定值1，因此每次点击只会调用数组下标为1的red色，无法切换其他颜色
• 冗余代码：你在<head>和<body>末尾重复引入了两次first.js，位于<head>的引入会因为DOM尚未完成渲染，导致JS获取DOM元素时抛出报错，虽然body末尾的引入可以正常执行，但仍建议删除head中的冗余引入。

修复后的JavaScript代码 #

const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    // 生成适配数组长度的随机合法下标
    const randomNumber = Math.floor(Math.random() * colors.length);
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
});

上述代码中Math.random()会生成0到1之间的随机浮点数，乘以数组长度colors.length后得到0到数组长度值之间的随机浮点数，再通过Math.floor()向下取整即可得到全部合法的数组下标，实现每次点击随机切换背景色的效果。

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