Estoy creando un sitio web para crear paletas de colores, pero parece que no puedo resolver un error que no es de JavaScript (probablemente un error de html o CSS) que estoy enfrentando.
var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var c3 = document.getElementById('c3'); function rand(x) { return (Math.random() * x).toFixed(0); } function cc() { let y = rand(360); let z; if (rand(2) === 0) { z = 50; } else if (rand(1) === 1) { z = 120; } else { z = 170; } c1.style.backgroundColor = `hsl(${y}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c2.style.backgroundColor = `hsl(${(y+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c3.style.backgroundColor = `hsl(${(y+z+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; } cc(); <button onclick='cc();'>Create Color Themes!</button> <div id='c1'>X</div> <div id='c2'>X</div> <div id='c3'>X</div>La depuración simple le mostrará su problema.
var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var c3 = document.getElementById('c3'); function rand(x) { return (Math.random() * x).toFixed(0); } function cc() { let y = rand(360); let z; if (rand(2) === 0) { z = 50; } else if (rand(1) === 1) { z = 120; } else { z = 170; } console.log(`hsl(${y}deg, ${50+rand(50)}%, ${rand(25)+25}%)`) c1.style.backgroundColor = `hsl(${y}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c2.style.backgroundColor = `hsl(${(y+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c3.style.backgroundColor = `hsl(${(y+z+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; } cc(); <button onclick='cc();'>Create Color Themes!</button> <div id='c1'>X</div> <div id='c2'>X</div> <div id='c3'>X</div>Estás devolviendo una cadena. Una cadena más un número es una cadena. Entonces necesita su código aleatorio para devolver un número.
var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var c3 = document.getElementById('c3'); function rand(x) { return Math.floor(Math.random() * x); } function cc() { let y = rand(360); let z; if (rand(2) === 0) { z = 50; } else if (rand(1) === 1) { z = 120; } else { z = 170; } c1.style.backgroundColor = `hsl(${y}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c2.style.backgroundColor = `hsl(${(y+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; c3.style.backgroundColor = `hsl(${(y+z+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`; } cc(); <button onclick='cc();'>Create Color Themes!</button> <div id='c1'>X</div> <div id='c2'>X</div> <div id='c3'>X</div>