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>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>