Javascript 更改随机div的颜色

有一个有25个分区的运动场。点击“播放”按钮，一个随机分区应该变成蓝色。 通过单击蓝色的div，应该将其重新绘制为绿色。 如果没有咔嗒声，在用蓝色晒黑2秒钟后，应重新涂上红色

我一按，绿灯亮起，过了一会儿就变成了红色。 为满足上述条件，需要进行哪些更改以及如何更改

const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6',
            'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13',
            'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20',
            'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];


        let setBlue = (rancelBlue) => {
            const randomNumber = duel[Math.floor(Math.random() * 25)];
            rancelBlue = document.getElementById(randomNumber).style.backgroundColor = 'blue'
            setTimeout(setBlue, 2000)
            setTimeout(()=> document.getElementById(randomNumber).style.backgroundColor='red',2000)
            };


        let setGreen = (e) => {
            if (e.target.style.backgroundColor === 'blue')
                e.target.style.backgroundColor = 'green'
        };

          <div>            
                <div>
                    <button onClick={setBlue}>Play</button>
                </div>            
                        <div onClick={setGreen} >
                                <25 div></div>          
                        </div>
          </div>

const duel=['duel1'，'duel2'，'duel3'，'duel4'，'duel5'，'duel6'，'，
‘决斗七’、‘决斗八’、‘决斗九’、‘决斗十’、‘决斗十一’、‘决斗十二’、‘决斗十三’，
“决斗14”、“决斗15”、“决斗16”、“决斗17”、“决斗18”、“决斗19”、“决斗20”，
“决斗21”、“决斗22”、“决斗23”、“决斗24”、“决斗25”]；
设setBlue=（rancelBlue）=>{
const randomNumber=决斗[Math.floor（Math.random（）*25）]；
rancelBlue=document.getElementById（随机数）.style.backgroundColor='blue'
设置超时（setBlue，2000）
setTimeout（（）=>document.getElementById（randomNumber）.style.backgroundColor='red'，2000）
};
设setGreen=（e）=>{
如果（e.target.style.backgroundColor==='blue'）
e、 target.style.backgroundColor='绿色'
};
玩

您应该在setTimeout回调中添加蓝色背景检查。如果背景颜色为蓝色，则仅将颜色设置为红色。 我认为两次调用setTimeout没有必要，因为两次调用都在两秒钟内工作

    let setBlue = (rancelBlue) => {
      const randomNumber = duel[Math.floor(Math.random() * 25)];
      rancelBlue = document.getElementById(randomNumber).style.backgroundColor = 'blue'
      setTimeout(()=> {
        if (e.target.style.backgroundColor === 'blue') {
          document.getElementById(randomNumber).style.backgroundColor='red'
        }
        setBlue()
      },2000)
   }

---

setTimeout返回一个timerID，可用于取消调用。您可以捕获此ID，并在setGreen函数中调用clearTimeout函数以防止将div设置为红色。我不确定我是不是搞错了问题，但你需要保留绿色还是什么？你理解正确。我需要绿色在哪里可以插入事件“e”？如果我更改函数“e”的变量“rancelBlue”，则