Javascript 延迟更改颜色两次的问题

我最近开始了我的旅程，使用了所有前端的东西，我想用HTML、CSS和JavaScript创建一个类似于“Simon Says”的简单游戏

我希望应用程序将第一个字段标记为绿色以显示序列，然后在短暂延迟后将其更改回默认颜色（白色）。和第二个按钮一样，第三个。。。等等

因此，我得出以下结论：

function showFields() {
    for( var x = 0; x<computerSeq.length; x++) {

        field[computerSeq[x]].style.backgroundColor = "green";

        setTimeout(() => {
            field[computerSeq[x]].style.backgroundColor = "white";
        }, 1000);
    }
}

函数显示字段（）{
对于（var x=0；x{
字段[computerSeq[x]].style.backgroundColor=“白色”；
}, 1000);
}
}

然而，它并不像我想象的那样工作，因为背景一直是白色的。我附上以下代码的其余部分：

---

问题在于，在超时结束之前增加循环，导致程序因索引未定义而崩溃

在超时时间内，您需要引用

x-1

，而不是

x

：

setTimeout(() => {
  field[computerSeq[x - 1]].style.backgroundColor = "white";
}, 1000);

$（文档）.ready（（）=>{
设computerSeq=[]；
让playerSeq=[]；
const field=document.queryselectoral（'.field'）；
const button=document.getElementById（'startButton'）；
让计算机领域；
设roundNumber=0；
let failed=0；
让running=0；
var区间；
无功电流场；
函数newField（）{
computerField=Math.floor（Math.random（）*4）；
computerSeq.推送（computerField）；
}
函数showFields（）{
对于（变量x=0；x{
字段[computerSeq[x-1]].style.backgroundColor=“白色”；
}, 1000);
}
}
按钮。addEventListener（“单击”，（）=>{
$（'四舍五入'）.text（'1'）；
roundNumber=1；
button.style.display=“无”；
运行=1；
如果（运行==1）{
newField（）；
showFields（）；
控制台日志（computerSeq）；
}
});
});
*{
填充：0；
保证金：0；
框大小：边框框；
颜色：白色；
}
#头衔{
字体大小：40px；
文本对齐：居中；
填充：30px；
文本阴影：2px 2px黑色；
}
身体{
背景色：rgb（0,75,145）；
}
.游戏包装{
背景色：rgb（20,0,110）；
文本对齐：居中；
.桌子{
背景色：rgb（0,71,165）；
.行{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
#第1行{
填充顶部：60px；
}
#第2行{
填充底部：60px；
}
.场{
宽度：100px；
高度：100px；
背景色：白色；
保证金：5px；
过渡时间：500ms；
盒影：2×2×rgb（78,78,78）；
}
.字段：悬停{
光标：指针；
背景色：rgb（185185185185）；
}
}
.info包装器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
填充：30px0；
字体大小：30px；
.乐谱包装{
右边距：30px；
}
钮扣{
背景色：rgb（40,0,104）；
边框：1px实心rgb（0,0,26）；
字体大小：25px；
宽度：200px；
边界半径：5px；
过渡时间：500ms；
}
按钮：悬停{
光标：指针；
}
.info{
自对准：居中；
左边距：30px；
}
}
}

备忘录游戏
备忘录游戏
圆形：
0
开始
不轮到任何人
问题在于，在超时结束之前增加循环，导致程序因索引未定义而崩溃

在超时时间内，您需要引用
x-1
，而不是
x
：

setTimeout(() => {
  field[computerSeq[x - 1]].style.backgroundColor = "white";
}, 1000);


$（文档）.ready（（）=>{
设computerSeq=[]；
让playerSeq=[]；
const field=document.queryselectoral（'.field'）；
const button=document.getElementById（'startButton'）；
让计算机领域；
设roundNumber=0；
let failed=0；
让running=0；
var区间；
无功电流场；
函数newField（）{
computerField=Math.floor（Math.random（）*4）；
computerSeq.推送（computerField）；
}
函数showFields（）{
对于（变量x=0；x{
字段[computerSeq[x-1]].style.backgroundColor=“白色”；
}, 1000);
}
}
按钮。addEventListener（“单击”，（）=>{
$（'四舍五入'）.text（'1'）；
roundNumber=1；
button.style.display=“无”；
运行=1；
如果（运行==1）{
newField（）；
showFields（）；
控制台日志（computerSeq）；
}
});
});
*{
填充：0；
保证金：0；
框大小：边框框；
颜色：白色；
}
#头衔{
字体大小：40px；
文本对齐：居中；
填充：30px；
文本阴影：2px 2px黑色；
}
身体{
背景色：rgb（0,75,145）；
}
.游戏包装{
背景色：rgb（20,0,110）；
文本对齐：居中；
.桌子{
背景色：rgb（0,71,165）；
.行{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
#第1行{
填充顶部：60px；
}
#第2行{
填充底部：60px；
}
.场{
宽度：100px；
高度：100px；
背景色：白色；
保证金：5px；
过渡时间：500ms；
盒影：2×2×rgb（78,78,78）；
}
.字段：悬停{
光标：指针；
背景色：rgb（185185185185）；
}
}
.info包装器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
填充：30px0；
字体大小：30px；
.乐谱包装{
右边距：30px；
}
钮扣{
背景色：rgb（40,0,104）；
边框：1px实心rgb（0,0,26）；
字体大小：25px；
宽度：200px；
边界半径：5px；
过渡时间：500ms；
}
按钮：悬停{
光标：指针；
}
.info{
对齐自我：分