Blur an image with JavaScript

Question

I want to make something like a Slideshow, but if you press a button for the next Picture, it should blur out until its unrecognizeable and then the next should appear blurred and become sharp. Problem here is, i would have to apply the blur via JS and my current approach looks like this: document.getElementById("no1").style.filter = "blur(3Px)";

If i apply the blur with css it works just fine, but i need it to apply when the button is clicked, which does not work. The obejct i am trying to blur is an <img>

Also, it would be good to know, if there is something like a waiting condition or if additional steps in the function will wait for the transition duration of the blur to be done before starting.

Answer 1

const img = document.querySelector('img');
img.addEventListener('click', toggleBlur);

function toggleBlur() {
  this.classList.toggle('blur');
}

img { transition: filter 1s linear; }
.blur { filter: blur(30px); }

<img src="https://i.imgur.com/KjUybBD.png"></img>

Works for me in Chrome, Firefox, Safari, latest Edge...