入门JavaScript项目：为何背景色从Orangered而非Blue开始？

核心逻辑拆解 #

你的JS代码里，问题出在**后置递增运算符index++**的执行顺序上，先看关键代码段：

var index = 0;
document.querySelector("#submit").addEventListener("click", () => {
  if(index > colors.length - 1) index = 0;
  document.body.style.backgroundColor = colors[index++];
});

执行流程：

1. 页面加载后，index初始值为0
2. 第一次点击按钮时，先判断index是否超出数组边界（0显然没超过），跳过重置逻辑
3. 执行colors[index++]时，先使用当前index的值（0）获取数组元素——也就是colors[0] = Orangered，将其设为页面背景色
4. 赋值完成后，index才会自增为1
5. 第二次点击按钮时，才会使用index=1对应的colors[1] = Blue作为背景色

调整方案（可选） #

如果想要第一次点击就设置Blue，有两种简单实现方式：

• 方式一：直接修改初始index值

  var index = 1; // 从数组第二个元素（Blue）开始计数
  

• 方式二：改用前置递增运算符，调整执行顺序

  document.querySelector("#submit").addEventListener("click", () => {
    index++;
    // 超出边界时重置为0
    if(index > colors.length - 1) index = 0;
    document.body.style.backgroundColor = colors[index];
  });
  

内容的提问来源于stack exchange，提问作者Rave On Time