How can I make the code generate the colors correctly?-CodePudding

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)60}deg, ${50 rand(50)}%, ${rand(25) 25}%)`;
  c3.style.backgroundColor = `hsl(${(y z z)60}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>

CodePudding user response：

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)60}deg, ${50 rand(50)}%, ${rand(25) 25}%)`;
  c3.style.backgroundColor = `hsl(${(y z z)60}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)60}deg, ${50 rand(50)}%, ${rand(25) 25}%)`;
  c3.style.backgroundColor = `hsl(${(y z z)60}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>