Linear-gradient is not responsive on Chrome but responsive on FireFox why?
Question
I wrote this code for live background gradient Generator but it is not working on google chrome but working on firefox what am i doing wrong ?
var color1 = document.querySelector(".color1"); var color2 = document.querySelector(".color2"); var body = document.getElementById("gradient"); function doGradient() { body.style.background = "linear-gradient(to right, " + color1.value + "," + color2.value + ")"; } color1.addEventListener("input", doGradient) color2.addEventListener("input", doGradient) doGradient();
<body id="gradient"> <h1>Gradient Generator</h1> <input class="color1" type="color" name="color1" value="#00ff00"> <input class="color2" type="color" name="color2" value="#ff0000"> <h2>CSS Background</h2> </body>
not responsive or live on Google Chrome but work prefectly on firefox
1 answers
solution1
0 2019-04-29 17:21:40
I think you forgot to call the doGradient in the EventListener. But after @Jon's edit, he added calling the function.
color1.addEventListener("input", doGradient())
Try it like this and I hope it solves the issue.
Edit:
If you want to apply the gradient after selecting another color, you should use change event listener instead of input .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.