0

J.S | CSS help: making an image editor .filter

On this image editor code I'm making, I ha e two filters so far, grayscale and brightness. The problem is;l: when I slide the brightness (input), the grayscale effect disappears - when I slide the grayscale (input), the brightness effect disappears. ^ I need help to make the effects / filters to stay_ even when a different effect Is being Changed. https://code.sololearn.com/Wep8Iw2ZgCiF/?ref=app

27th Jun 2019, 4:03 AM
Ginfio
Ginfio - avatar
9 Réponses
+ 3
I hope you already know the problem: the filter only applies 1 element at a time. To fix this, you have to use all values at once: img.style.filter = `grayscale(${gs}) brightness(${br})...`;
27th Jun 2019, 4:45 AM
Airree
Airree - avatar
+ 3
Gordon, Do the filters have to be in certain order on different functions (elm.oninput=). Or, could they be in the same order like this? aa.oninput = func...{ img.filter = a...()" + b() + c(); } bb.oninput = func...{ img.filter = a....() + b() + c() } ?
27th Jun 2019, 10:59 PM
Ginfio
Ginfio - avatar
+ 2
No, but if you do img.style.filter = "grayscale(0.5)", then change the filter to img.style.filter = "brightness(0.5)", it throws away the grayscale
27th Jun 2019, 5:09 AM
Airree
Airree - avatar
+ 2
Ok, finally i understand it, (sorry if that was overwhelming you guys ) Thanks. ✔️💡
27th Jun 2019, 5:39 AM
Ginfio
Ginfio - avatar
+ 1
Airree , i dont understand - " the filter only applies 1 element at a time" if i use all value at once, does it mean i only need one input?.
27th Jun 2019, 4:59 AM
Ginfio
Ginfio - avatar
+ 1
I checked your profile, and your CSS course is finished but only 17xp 🤔 how can that be? i suggest, you remove the course, and start again, and follow each lesson, play with the Try It Yourself examples a little bit, and answer each quiz again for better understanding.
27th Jun 2019, 6:08 AM
Gordon
Gordon - avatar
+ 1
Gordon , just recently i checked my CSS, and it was not complete. I always thought it was complete. But i thought i completed it after i saw that it wasnt 🤔. Ill check over things again.
27th Jun 2019, 6:13 AM
Ginfio
Ginfio - avatar
+ 1
👍 keep up
27th Jun 2019, 6:16 AM
Gordon
Gordon - avatar