Puedo usar la función coloroo bastante bien pero solo por primera vez. cuando trato de hacerlo después de la primera vez, la función no puede comparar los resultados correctamente.
por alguna razón, la respuesta correcta elegida cambia y porque
ayuda por favor
function coloroo() { newColours.addEventListener("click", () => { let limit = 6; let check = 0; while (check < limit) { let a = random(); let b = random(); let c = random(); square[check].style.backgroundColor = `rgb(${a},${b},${c})`; check = check + 1; } let right = Math.floor((Math.random() * 6)); let answer = square[right]; textColo.innerHTML = `${answer.style.backgroundColor}`; square.forEach(e => { e.addEventListener("click", () => { let choice = e.style.backgroundColor; let corree = answer.style.backgroundColor; if (corree == choice) { messag.innerHTML = "correct"; } else if (corree != choice) { messag.innerHTML = "try again"; e.style.backgroundColor = "#232323"; } }) }) }) }; coloroo();Mirando su código, parece que está creando una prueba de color, supongo. Edité el código y agregué algunos. Quizás te sirva para lo que buscas. El problema de comparación no ocurre en este ejemplo.
const d = document; const newColours = d.getElementById('new-colours'); const random = () => 0 + Math.floor(Math.random() * (255 - 0 + 1)); const square = [ d.getElementById('item-0'), d.getElementById('item-1'), d.getElementById('item-2'), d.getElementById('item-3'), d.getElementById('item-4'), d.getElementById('item-5') ]; const question = d.getElementById('question'); const textColor = d.getElementById('text-color'); const messag = d.getElementById('messag'); const createOptions = () => { let limit = 6; let check = 0; while (check < limit) { let a = random(); let b = random(); let c = random(); square[check].style.backgroundColor = `rgb(${a},${b},${c})`; check = check + 1; } } function coloroo() { let answer, choice, corree; newColours.addEventListener("click", () => { question.style.display = 'block'; newColours.innerHTML = 'Refresh'; createOptions(); let right = Math.floor((Math.random() * 6)); answer = square[right]; textColor.innerHTML = `${answer.style.backgroundColor}`; messag.style.display = 'none'; }) square.forEach(e => { e.addEventListener("click", () => { choice = e.style.backgroundColor; corree = answer.style.backgroundColor; if (corree == choice) { messag.innerHTML = "correct"; } else if (corree != choice) { messag.innerHTML = "try again"; e.style.backgroundColor = "#232323"; } messag.style.display = 'block'; }) }) // Uncomment the next line to make it start immediately // newColours.click(); } coloroo(); .choices { display: flex; margin-top: 10px; } .choices div { color: #fff; cursor: pointer; height: 40px; width: 40px; padding: 10px; box-sizing: border-box; margin: 0 10px 10px 0; } #question { display: none; } <html> <body> <button id="new-colours">Start</button> <div class="choices"> <div id="item-0"></div> <div id="item-1"></div> <div id="item-2"></div> <div id="item-3"></div> <div id="item-4"></div> <div id="item-5"></div> </div> <p id="question">Which square has <span id="text-color"></span> as background color value?</p> <p id="messag"></p> </body> </html>