Menu
I am trying to use JavaScript to change an image's CSS filter when a user selects a new value on a range element. My HTML does not seem to work though. Here are my CSS image styles:
<!DOCTYPE html>
<html>
<head> <style>
img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style> </head>
Here are my image and range elements :
<body>
<img src="pineapple.jpg" id="Image" alt="Pineapple" width="300"
height="300">
<form>
Photo Filter:
<input type="range" id="Filter" name="points" min="0" max="10"
onclick="ChangeFilter()">
</form>
Here is my JavaScript function to change the CSS image style:
<script>
function ChangeFilter() {
Image = document.getElementById("Image").style.filter;
Filter = document.getElementById("Filter").value;
if (Filter == 1) {Image = grayscale(10%);}
if (Filter == 2) {Image = grayscale(20%);}
if (Filter == 3) {Image = grayscale(30%);}
if (Filter == 4) {Image = grayscale(40%);}
if (Filter == 5) {Image = grayscale(50%);}
if (Filter == 6) {Image = grayscale(60%);}
if (Filter == 7) {Image = grayscale(70%);}
if (Filter == 8) {Image = grayscale(80%);}
if (Filter == 9) {Image = grayscale(90%);}
if (Filter == 10) {Image = grayscale(100%);}
}
</script>
</body>
</html>
But when I select a new value on the range element, the image's style properties just won't respond. Help Please! Many Thanks :)
200
asked Apr 26 '26 04:04
Change onclick event to onchange in html and in javascript do this:
<script>
var image = document.getElementById("Image");
var range = document.getElementById("Filter");
function ChangeFilter() {
image.style.WebkitFilter = "grayscale(" + range.value*10 + "%)");
image.style.filter = "grayscale(" + range.value*10 + "%)");
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
