If i unblur an image, the next one is unblurred as well when I fetch new ones

user_12356298 0
Viewed 67

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");
        
});
blur fetch-api javascript
1 Answers

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');
        
});
user_172151970
Related