如何将JS顺序切换背景色脚本绑定到指定HTML按钮触发？

你的代码存在三个问题：一是把点击事件绑定到了全局作用域，页面任意位置点击都会触发回调，导致点击其他按钮也会切换背景；二是颜色数组存在无效色值；三是索引判断逻辑会出现数组越界。按以下方式修改即可实现仅点击指定按钮，按固定顺序循环切换背景的效果。

修改步骤 #

• 首先修正基础错误：原颜色数组中#0ae196c是无效十六进制色值（长度为7位，不符合十六进制颜色6位/8位的格式要求），需要替换为合法色值；删除原代码中绑定在全局的click事件监听，避免全局触发。
• 选择以下任意一种实现方式即可，第一种完全适配你已写好的HTML结构，不需要修改button标签代码。

方式1：适配原有内联onclick绑定 #

你定义的button标签已经写了onclick="ordercolor()"，直接在脚本中定义对应函数即可：

// 预设固定顺序的颜色数组，已修正无效色值，可自行调整颜色顺序
const colorList = [
  "#222f3e",
  "#dd260e",
  "#0ae196",
  "#0ae127",
  "#0a7ce1",
  "#a60ae1",
  "#808000",
  "#00FF00",
  "#00FFFF",
  "#008080",
  "#FF5733"
];
// 记录当前显示的颜色索引
let currentIndex = 0;
// 页面加载完成后默认设置第一个颜色为背景
document.body.style.background = colorList[currentIndex];

// 按钮点击触发的函数
function ordercolor() {
  // 索引累加，到数组末尾后重置为0，实现无限循环
  currentIndex = currentIndex < colorList.length - 1 ? currentIndex + 1 : 0;
  // 切换页面背景色
  document.body.style.background = colorList[currentIndex];
}

方式2：直接通过JS绑定事件到目标按钮 #

如果你不想用HTML内联的事件绑定，可以删掉button标签里的onclick="ordercolor()"属性，直接在JS中选中class为ordercolor的按钮绑定事件：

const colorList = [
  "#222f3e",
  "#dd260e",
  "#0ae196",
  "#0ae127",
  "#0a7ce1",
  "#a60ae1",
  "#808000",
  "#00FF00",
  "#00FFFF",
  "#008080",
  "#FF5733"
];
let currentIndex = 0;
document.body.style.background = colorList[currentIndex];

// 仅选中class为ordercolor的按钮绑定点击事件
document.querySelector('.ordercolor').addEventListener('click', function() {
  currentIndex = currentIndex < colorList.length - 1 ? currentIndex + 1 : 0;
  document.body.style.background = colorList[currentIndex];
})

• 最终效果：只有点击class为ordercolor的按钮时，才会按照数组中定义的固定颜色顺序循环切换页面背景，点击页面其他区域、其他按钮都不会触发背景变化。

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