I'm trying to change the css filter (hue-rotate to be exact) on a png by using a slider input. I keep getting "-webkit-filter:hue-rotate( undefined deg)"
Thanks for your help!
Here's my code:
function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">
Change oninput="hueFunction(this.hueVal)"
to oninput="hueFunction(this.value)"
function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">
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.