为何点击按钮时我的JavaScript代码无法实现背景色动态切换？

• 你定义的random变量在页面加载时就生成了一个固定值，点击按钮时只是重复使用这个已确定的随机数，所以每次点击都会切换到同一个背景色，只有刷新页面才会重新生成新的随机数。
• 代码存在一处语法错误：case 6中的颜色值#A020F0.多了一个末尾的点，这会导致该分支的颜色设置无效。

将生成随机数的逻辑移到按钮点击事件的回调函数内部，这样每次点击按钮都会重新生成新的随机数，从而切换不同背景色，同时修正颜色值的错误：

let bod = document.getElementById("bod");
let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  // 每次点击重新生成1-10的随机数，避免0触发default分支
  let random = Math.floor(Math.random() * 10) + 1;
  switch (random) {
    case 1:
      bod.style.backgroundColor = "#FFFF00";
      break;
    case 2:
      bod.style.backgroundColor = "#000000";
      break;
    case 3:
      bod.style.backgroundColor = "#00FF00";
      break;
    case 4:
      bod.style.backgroundColor = "#0000FF";
      break;
    case 5:
      bod.style.backgroundColor = "#808080";
      break;
    case 6:
      bod.style.backgroundColor = "#A020F0"; // 移除多余的末尾点
      break;
    case 7:
      bod.style.backgroundColor = "#FFC0CB";
      break;
    case 8:
      bod.style.backgroundColor = "#FF0000";
      break;
    case 9:
      bod.style.backgroundColor = "#FFFFFF";
      break;
    case 10:
      bod.style.backgroundColor = "#FFD700";
      break;
    default:
      // 可选：设置默认背景色，比如恢复初始状态
      bod.style.backgroundColor = "";
  }
});

把所有颜色值存入数组，通过随机索引直接获取颜色，代码会更简洁易维护：

let bod = document.getElementById("bod");
let btn = document.getElementById("btn");

// 存储所有可选背景色的数组
const backgroundColors = [
  "#FFFF00", "#000000", "#00FF00", "#0000FF",
  "#808080", "#A020F0", "#FFC0CB", "#FF0000",
  "#FFFFFF", "#FFD700"
];

btn.addEventListener("click", function () {
  // 生成0到数组长度-1的随机索引
  const randomIndex = Math.floor(Math.random() * backgroundColors.length);
  bod.style.backgroundColor = backgroundColors[randomIndex];
});

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