Search code examples
javascriptdom

filtered out elements staying hidden

if I click on a button "show only hats", it removes elements that have the class "not-a-hat", the problem is, when I click on another filter ex. "show only socks" after clicking on "show only hats", they both dissapear because the filter doesn't reset. the code to this is(JS):

var hat_filter = document.getElementById("#filter-by-hat");
var all_hats = document.querySelectorAll(".not-a-hat")
hat_filter.addEventListener('click',function(){

    for (let i=0; i < all_hats.length; i++){
        all_hats[i].classList.add("hide-element")
    }
})
Solution

  • Maybe you can start the function with a line that sets all the elements to 'visible', so that every time the function runs, all the elements will be visible.