I can use the coloroo function quite well but just for the first time. when I try to do it after the first time, the function cannot compare results properly.
for some reason the chosen right answer does change and beca
help please
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();Looking at your code it seems you're building a color quiz is my guess. I've edit the code and added some. Maybe it will help you for what you are looking for. The compare problem doesn't happen in this example.
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>