JS实现点击按钮循环切换h1颜色仅显示最后一个值问题求解

• 你当前代码的for循环会在单次点击触发时同步执行完所有颜色赋值操作，执行速度极快，人眼无法识别中间的颜色切换过程，只会看到最后一次赋值的数组末尾颜色。
• 没有在全局持久维护当前颜色的索引状态，每次点击都会重新遍历整个数组，无法记录上一次切换到的颜色位置。

将颜色数组、当前颜色索引放在点击事件外部存储，每次点击时更新索引再赋值对应颜色即可，修正后的JS代码如下：

const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1')
// 全局存储颜色列表和当前选中的颜色索引
const colors = ['red', 'yellow', 'brown', 'green', 'blue']
let currentColorIdx = 0

btn.addEventListener('click', () => {
    // 赋值当前索引对应的颜色
    h1.style.color = colors[currentColorIdx]
    // 索引自增，取模运算实现数组遍历完后自动回到开头循环
    currentColorIdx = (currentColorIdx + 1) % colors.length
})

• 页面加载时就完成h1元素、按钮元素、颜色列表的查询和定义，避免每次点击都重复查询DOM、重复创建颜色数组，性能更优。
• currentColorIdx变量持久记录当前使用的颜色索引，每次点击后自增1，通过% colors.length的取模运算，当索引值等于数组长度时会自动重置为0，实现循环切换的效果。

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