JavaScript body.style.background not working with linear-gradient in script.js but works fine in console

user_10874158 0
Viewed 3812

body.style.background = not working in script.js included file everything else works the cashed dom selectors work typing the body.style.background = 'red'; works but not in included file

I've tried console.logs as described in code below the output peculiar thing is if i copy the logs from the callbacks and paste it with body.style.background it works but not in the script file.

color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");

function changeBackgroundColor() {
    body.style.background = "linear-gradient(to right, "+color_1.value+ ", "+ color_2.value+");";

//************* I am getting the console.logs but the background's not changing

    console.log("linear-gradient(to right, " + color_1.value + ", " + color_2.value + ");");
}

//************* Both the listeners work fine and the cashed selectors

color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);
<html>
  <head>
      <title>Background Color Generator</title>

      <!-- Custom Styles -->
      <style type="text/css">
          body {
                  background: linear-gradient(to right, red , yellow);
          }
      </style>

  </head>

  <body>
      <div class="container">
          <input id="color-1" type="color">
          <input id="color-2" type="color">
      </div>

  </body>
</html>

Background should change color when color input is changed but nothing happens.

linear-gradients background dom javascript
2 Answers

In order to do linear gradients via JavaScript like this, you would need to access the body.style.backgroundImage property. You can then pass in your linear-gradient string to build the gradient.

function changeBackgroundColor() {
body.style.backgroundImage = "linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";

A small note as well, whenever you're passing your string (in this case or any time you're setting CSS properties this way) you do not need to supply the trailing ; that CSS expects. So the line you have:

"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +");";

Notice the first ; you have there. It should be dropped to leave you with this string:

"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";

You can find some examples on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

And on W3Schools:
https://www.w3schools.com/jsref/prop_style_backgroundimage.asp

user_5448470

You were pretty close to the right answer. The only thing you need to do is to remove from your code the ; where you are making the gradient change (so it should be color_2.value + ")"; and not color_2.value + ");";.

Note that you want to modify the actual property. The ; is just a separator used in CSS to differentiate between separate properties, you don't need it when you are modifying them from code.

Below you have a working example.

color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");

function changeBackgroundColor() {
    body.style.backgroundImage = "linear-gradient(to right, " +color_1.value+ ", "+ color_2.value + ")";
}

//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
    <title>Background Color Generator</title>

    <!-- Custom Styles -->
    <style type="text/css">
        body {
                height: 100vh;
                background: linear-gradient(to right, red , yellow);
        }
    </style>

</head>

<body>
    <div class="container">
        <input id="color-1" type="color">
        <input id="color-2" type="color">
    </div>


    <!-- Custom Javascript -->
    <script src="script.js"></script>
</body>
</html>

Cheers!

user_36703870
Related