'when I start the function for the second time it does not give me the result i want

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();
javascripthtmljquerycssarraysc#json


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions