Cuando cargo una imagen borrosa con el botón 3, puedo desenfocarla con el botón 1 después. Pero cuando vuelvo a hacer clic en el botón 3 para cargar la siguiente imagen, permanece sin desenfoque en lugar de una siguiente imagen borrosa...
CSS:
.show3 { filter: blur(8px); } .show2 { transition-duration: 5s; filter: none !important; }JavaScript:
let element2 = document.getElementById("button3"); element2.addEventListener("click", () => { let cat_result = document.getElementById("cat_result"); fetch('https://aws.random.cat/meow') .then(res => res.json()) .then(data => { cat_result.innerHTML = `<img src="${data.file}"/>` }) cat_result.classList.toggle("show3"); }); let element1 = document.getElementById("button1"); element1.addEventListener("click", () => { let cat_result = document.getElementById("cat_result"); cat_result.classList.toggle("show2"); });Debe eliminar "show2" cuando haga clic en el primer botón y cambiarlo para que, en lugar de usar alternar, use agregar y eliminar.
let element2 = document.getElementById("button3"); element2.addEventListener("click", () => { let cat_result = document.getElementById("cat_result"); cat_result.classList.remove("show2"); cat_result.classList.add('show3'); fetch('https://aws.random.cat/meow') .then(res => res.json()) .then(data => { cat_result.innerHTML = `<img src="${data.file}"/>` }) }); let element1 = document.getElementById("button1"); element1.addEventListener("click", () => { let cat_result = document.getElementById("cat_result"); cat_result.classList.add("show2"); cat_result.classList.remove('show3'); });