When I load a blurred image with button3, i can unblurr it with button1 after. Buth when I click button3 again to load the next image, it stays unblurred instead of a next blurred image...
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");
});
You need to remove "show2" when you click the first button and change it so instead of using toggle, use add and remove.
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');
});