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>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.
Share Improve this question edited Jan 9, 2019 at 13:23 akraf 3,25526 silver badges49 bronze badges asked Jan 9, 2019 at 12:22 Pushparaj VaghelaPushparaj Vaghela 231 silver badge6 bronze badges2 Answers
Reset to default 7In 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/en-US/docs/Web/CSS/background-image
And on W3Schools:
https://www.w3schools./jsref/prop_style_backgroundimage.asp
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./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!