I'm pretty new to JavaScript and trying to make my image from RGB to Grayscale while scrolling down and vise versa. I managed my image to get grayvalued when scrolling however I don't get back to the RGB image.
My code for JavaScript is:
let element = document.getElementById("image");
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
} else {
element.src = 'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80'
}
};
It's also public on https://jsfiddle.net/vdszymh7/139/
Maybe you have some suggestions how to dynamically change between these two modes.
What you're trying to achieve could be done by this way:
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
console.log('gray')
} else {
element.style.filter = 'none'
}
};