How to create different events for images in an array?

Question

JavaScript

Hello. I want to make an unblurred image when I click on it and blurry when I click it again. This code works, but only for one picture. I don’t understand a little how to make a variable (setBlur[?]) in the blurStyle function so that each picture has its own event. (Except for creating a copy of this function and changing variables).

var setBlur = document.getElementsByTagName("img");

 function setListenerForImage(){
   for(var i = 0; i < setBlur.length; i++){ 
   setBlur[i].addEventListener("click", blurStyle);	
 }
 }
   
   var count = 0;
   function blurStyle(e){
      if(e.mousedown) return;
     if(count == 0){
  setBlur[0].style.filter = "blur(0px)"; 
  count++;
     }else if(count == 1){
    setBlur[0].style.filter = "blur(5px)"; 
  count = 0;	 
     } 
   } 
   
     setListenerForImage();

Answer 1

Tyk

var setBlur = document.getElementsByTagName("img");

function setListenerForImage(){
  for(var i = 0; i < setBlur.length; i++){ 
    setBlur[i].addEventListener("click", blurStyle);	
  }
}

function blurStyle(e){
  var img=this;
  var state=img.getAttribute('blur');
  if(e.mousedown) return;
  if(state == 1){
    img.style.filter = ""; 
    img.setAttribute('blur',0);
  }else{
    img.setAttribute('blur',1);
    img.style.filter = "blur(5px)"; 

  } 
} 

setListenerForImage();

Example