Cada vez que hago clic en un botón en el navegador, muestra un color aleatorio junto con su código rgb (r, g, b). Hice 3 variables r , g y b que producen números aleatorios del 0 al 255 usando la lógica básica de Math.floor(Math.random()*256) ;
Mi problema es que a veces los colores aleatorios generados son demasiado oscuros y el código rgb que se muestra junto con ellos es de color negro.
Intenté escribir una lógica que cada vez que r+g+b < 300, alterne la clase del elemento h1 que tiene una propiedad de color blanco.
const h1 = document.querySelector('h1'); const button = document.querySelector("button"); h1.classList.add('h1'); //if (r+g+b < 500) button.addEventListener('click', () => { changeColor(); }); const changeColor = (() => { const newColor = randomColor(); document.body.style.backgroundColor = newColor; h1.innerText = newColor; } ); const randomColor = (() => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; })Una forma simple es hacer que las variables r, g, b tengan un alcance más amplio para que puedan usarse para hacer su prueba <500 en el mismo lugar donde cambia el color de fondo.
const h1 = document.querySelector('h1'); const button = document.querySelector("button"); let r, g, b; h1.classList.add('h1'); button.addEventListener('click', () => { changeColor(); }); const changeColor = (() => { const newColor = randomColor(); document.body.style.backgroundColor = newColor; if (r + g + b < 500) h1.style.color = 'white'; else h1.style.color = 'black'; h1.innerText = newColor; }); const randomColor = (() => { r = Math.floor(Math.random() * 256); g = Math.floor(Math.random() * 256); b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; }) <h1></h1> <button>click me</button>Bueno, tienes que poner tu si dentro de esta función (randomColor) y cuando se generan los valores para (r,g,b) tu si para los nuevos valores se comprobará de nuevo cada vez que cambien los valores.
const randomColor = (() => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); if(r+g+b < 300){ h1.classList.add('h1'); } return `rgb(${r}, ${g}, ${b})`; })Prueba esto:
const changeColor = (() => { const newColor = randomColor(); document.body.style.backgroundColor = newColor[1]; h1.innerText = newColor[1]; const sumColor = newColor[0]; if (sumColor < 300){ h1.style.color = white; }else{ h1.style.color = black; } } ); const randomColor = (() => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); const sum = r+g+b; return [sum,`rgb(${r}, ${g}, ${b})`]; //returning array })