How can I make the code generate the colors correctly?

Question

I am creating a website for creating color palettes but I can't seem to solve a non-JavaScript error (probably html or CSS error) that I am facing.

 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>

Answer 1

Simple debugging will show you your problem.

 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>

You are returning a string. A string plus a number is a string. So you need your random code to return a number.

 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>