';' expected. | document.body.style.background-image = ``-CodePudding

Here is my code: code

 function toggle() {
     document.body.style.background-image = `
     linear-gradient(
      60deg,
      hsl(0deg 0% 0%) 0%,
      hsl(137deg 0% 1%) 0%,
      hsl(137deg 0% 2%) 0%,
      hsl(137deg 0% 4%) 2%,
      hsl(137deg 0% 5%) 5%,
      hsl(137deg 0% 5%) 10%,
      hsl(137deg 0% 6%) 19%,
      hsl(137deg 0% 6%) 42%,
      hsl(261deg 17% 14%) 88%,
      hsl(259deg 25% 27%) 97%,
      hsl(258deg 28% 40%) 100%,
      hsl(258deg 36% 54%) 100%
    );`;
  }

I am getting an error on line 43 saying

';' expected.

I dont know why and I doubt its an issue with the backticks. Any help would be greatly appreciated.

CodePudding user response：

Its backgroundImage, not background-image

function toggle() {
    document.body.style.backgroundImage = `
    linear-gradient(
      60deg,
      hsl(0deg 0% 0%) 0%,
      hsl(137deg 0% 1%) 0%,
      hsl(137deg 0% 2%) 0%,
      hsl(137deg 0% 4%) 2%,
      hsl(137deg 0% 5%) 5%,
      hsl(137deg 0% 5%) 10%,
      hsl(137deg 0% 6%) 19%,
      hsl(137deg 0% 6%) 42%,
      hsl(261deg 17% 14%) 88%,
      hsl(259deg 25% 27%) 97%,
      hsl(258deg 28% 40%) 100%,
      hsl(258deg 36% 54%) 100%
    )
    `;
  }

CodePudding user response：

When we select any css double word property in JS like max-height, margin-left etc. we remove the '-' and capitalize the first letter of the second word like maxHeight or marginLeft. do So it will be backgroundImage.

document.body.style.backgroundImage = `
    linear-gradient(
      60deg,
      hsl(0deg 0% 0%) 0%,
      hsl(137deg 0% 1%) 0%,
      hsl(137deg 0% 2%) 0%,
      hsl(137deg 0% 4%) 2%,
      hsl(137deg 0% 5%) 5%,
      hsl(137deg 0% 5%) 10%,
      hsl(137deg 0% 6%) 19%,
      hsl(137deg 0% 6%) 42%,
      hsl(261deg 17% 14%) 88%,
      hsl(259deg 25% 27%) 97%,
      hsl(258deg 28% 40%) 100%,
      hsl(258deg 36% 54%) 100%
    )
    `;

h1{color:white}

<h1>Body with Linead Gradient Background</h1>