线性渐变对Chrome没有响应，但对FireFox有反应？为什么？
[英]Linear-gradient is not responsive on Chrome but responsive on FireFox why?
问题描述
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 ? 
我为实时背景渐变生成器编写了这段代码，但它不适用于谷歌浏览器但是在firefox上工作我做错了什么？
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 没有响应或在谷歌Chrome上生活，但在Firefox上完美运行
1 个解决方案
解决方案1
0 2019-04-29 17:21:40
I think you forgot to call the doGradient in the EventListener. 我想你忘了在EventListener中调用doGradient 。 But after @Jon's edit, he added calling the function. 但在@Jon的编辑之后，他又添加了调用函数。
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 . 如果要在选择其他颜色后应用渐变，则应使用change事件侦听器而不是input 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.