如何实现点击按钮遍历数组切换页面背景色？

你的问题出在点击事件里的for循环——每次点击按钮时，这个循环会瞬间跑完所有迭代，把背景色依次设置为数组里的每一种颜色，但因为执行速度太快，你只能看到最后一次设置的颜色（也就是数组最后一项）。

要实现每次点击切换到下一种颜色，你需要维护一个索引变量，记录当前用到的数组位置，每次点击时更新这个索引并切换颜色，具体步骤如下：

• 在外层声明一个索引变量（比如currentIndex），初始值设为0，用来追踪当前选中的颜色位置
• 点击按钮时，用currentIndex从数组里取对应颜色，设置为背景色
• 更新.color-code元素的内容为当前颜色名称
• 把currentIndex加1，当它超过数组长度时重置为0，实现循环切换
• 注意：你代码里的document.querySelector('color-code')写错了，类选择器需要加.，应该是document.querySelector('.color-code')

修正后的完整代码：

const colorArray = ["blue", "green", "red", "orange", "violet", "indigo", "yellow", "white", "pink", "black"];
// 声明索引变量，追踪当前颜色位置
let currentIndex = 0;

function changeColor() {
    const body = document.querySelector('body');
    const colorCode = document.querySelector('.color-code');
    const button = document.querySelector('button');

    button.addEventListener('click', function () {
        // 用当前索引取颜色
        const currentColor = colorArray[currentIndex];
        body.style.backgroundColor = currentColor;
        // 更新颜色名称显示
        colorCode.textContent = currentColor;
        
        // 索引自增，超出数组长度时重置为0
        currentIndex = (currentIndex + 1) % colorArray.length;
    })
}

changeColor();

这样每次点击按钮，就会依次切换数组里的颜色，循环往复，同时更新颜色名称的显示。

内容的提问来源于stack exchange，提问作者Oluwatreezy Tolulope Roberts