i want to blur an image with js but its not working-CodePudding

this is the small part code which i have write but its not working and img is the variable which i have store img ID in it

let filtercn=document.querySelectorAll('input[type=range]');

<div >
                        <span>Blur</span>
                        <input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px"><br>
                    </div>
    function applyFilter(){
        let fl='';
        filtercn.forEach(function(s){
        fl =s.getAttribute('data-filter') '(' s.value s.getAttribute('data-scale')  ')';       
        });
        img.style.filter=fl;
    };

CodePudding user response：

Editing on Riccardo LV's Answer without putting it in a different css file just do the following,

function applyFilter(img){
    img.css.filter = "blur(10px)";
}

CodePudding user response：

Not exacly what you asked, but I'd do it via CSS:

filter: blur(10px);

EDIT You can also do something like this (jQuery or JS are either ok of course):

onchange="$(this).css('filter','blur(10px)');"

CodePudding user response：

Your code is not wrong;

This is what you have used, just a bit cleaner and it does work :)

let filtercn = document.querySelectorAll('input[type=range]');
let img = document.querySelectorAll('img')[0];

function applyFilter() {
  let fl = '';
  filtercn.forEach(function(s) {
    fl  = s.getAttribute('data-filter')   '('   s.value   s.getAttribute('data-scale')   ')';
  });
  img.style.filter = fl;
};

<div>
  <span>Blur</span>
  <input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px">
  <img src="https://lh3.googleusercontent.com/a-/AOh14Gghf3M5ETbqkndUt57cgaUALuAW2cJ_o-O7r4H7=k-s64">
</div>

CodePudding user response：

There is no image in your code. so added an image and made the function more simple.

function applyFilter() {
    let image = document.getElementById("image");
    let blurVal = document.getElementById("blur").value;
    image.style.filter = "blur(" blurVal "px)"
}

#image {
  width: 300px;
}

<div >
    <span>Blur</span>
    <img id="image"  src="https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_960_720.jpg" alt="">
    <input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()"><br>
</div>