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

Question

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

Answer 1

Airree is right

https://code.sololearn.com/W8XiBWr6N23t/?ref=app

https://www.sololearn.com/learn/CSS/2999/

Answer 2

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})...`;

Answer 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()
}

?

Answer 4

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

Answer 5

Ok, finally i understand it, (sorry if that was overwhelming you guys )

Thanks.
✔️💡

Answer 6

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?.

Answer 7

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.

Answer 8

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.

Answer 9

👍

keep up