So im trying to make a color guessing game So i created a function that generates a color and returns it, which works fine But since i have 3 buttons with #hex code on them 1 button has to be a correct answer and correct #hex has to be displayed in a color box

So im trying to put 3 #hex codes in each button and choose randomly which #hex code is the correct one and display it in HTML

i know the code is very bad but i still got a long way to go...

function randomColor(){
    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    return randomColor
}

function arrayOfColors(){
    let randColorArr = []
}
function generateColors(){    
    colorBox.style.backgroundColor = `#${correctColor}`
    btn.forEach(button => button.innerHTML = `#${randomColor()}`)
}
generateColors()

CodePudding user response：

randomColor - I made a correction to your function that will always return a valid color number, arrayOfColors - I answered your question about the function and it now returns an array with three colors for your three buttons, randomIntFromInterval - designed to generate numbers in a certain range that you determine, `generateColors -

1. I drew an array of three colors,
2. I drew a lottery for the position in the array that would be the correct color,
3. I gave the div the correct color, and the buttons all three colors including a click event that will check if the user won,
4. Immediately after clicking, a new game starts.

const colorBox = document.querySelector('div');
const btns = document.querySelectorAll('button');

function randomColor(){
let randomColor = `#${((Math.random() * 0xfffff * 1000000).toString(16)).slice(0,6)}`;
    return randomColor
}

function arrayOfColors(){
    const arrayOfColors = [...Array(3).keys()].map(() => randomColor());
    return arrayOfColors;
}

function randomIntFromInterval(min, max) { // min and max included    
return Math.floor(Math.random() * (max - min   1)   min) 
};

function generateColors(){  
    const  arr = arrayOfColors();
    const correctIndexColor = randomIntFromInterval(0, 2);
    colorBox.style.backgroundColor = `${arr[correctIndexColor]}`;
    btns.forEach((button, index) => {
        button.innerHTML = `${arr[index]}`;
        button.onclick = () => {
           if(index === correctIndexColor)
              alert('win');
           else
              alert('faild');
           generateColors();
        }
    });
}

generateColors()

div {
   height: 100px;
   width: 100px;
} 

<button></button>
<button></button>
<button></button>
<div></div>

CodePudding user response：

I don't see the need to declare a arrayOfColors function, when you can just generate a random number between 1 and 3 and assign correctColor to the relative button:

const btn = document.querySelectorAll('button')
const colorBox = document.getElementById('cbox')

function randomColor(){
    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    return randomColor
}

function generateColors(correctColor){    
    colorBox.style.backgroundColor = `#${correctColor}`
    
    btn.forEach(button => button.innerHTML = `#${randomColor()}`)
    
    // GET RANDOM NUMBER BETWEEN 1 AND 3
    const rndBtnIndex = Math.floor(Math.random() * (3 - 1   1)   1)
    
    // ASSIGN THE CORRECT COLOR TO RANDOM BUTTON
    document.querySelector('#btn'   rndBtnIndex).innerHTML = `#${correctColor}`
}

generateColors('ff0000')

<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>

<div id="cbox">
  <p>colorBox</p>
</div>