How to correctly filter data shown on screen in javascript?

Question

I have filters and buttons set up for an array of data where a user clicks a button and the characters that match that button appear on the screen, but when I click a different button I have to refresh the page and click the new button again every time I want the data to appear. I want to switch it so every time a user clicks that same button only those characters that match the button show up on the screen without having to refresh the page, for the life of me I cannot get it to work correctly.

Javascript:

const mainHeader = document.querySelector('header')
//making male characters bounce on page
let maleButton = document.createElement('button')
maleButton.textContent = 'Male Characters'
maleButton.addEventListener('click', () => {
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});

//making female characters bounce on page
let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});

//making non gender characters bounce on page
let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});
//Want to add films button
let filmsButton = document.createElement('button')
filmsButton.textContent = 'Films'
filmsButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })

});


mainHeader.appendChild(maleButton)
mainHeader.appendChild(femaleButton)
mainHeader.appendChild(otherButton)
mainHeader.appendChild(filmsButton)

//filters
const maleCharacters = people.filter(person => person.gender !== 'male')
const femaleCharacters = people.filter(person => person.gender !== 'female')
const otherCharacters = people.filter(person => person.gender !== 'female' && person.gender !== 'male')

I assume you have a CSS file that corresponds with those class names? Can you add that code? — Jacob Penney
– Jacob Penney, Commented Dec 13, 2019 at 0:40
I don't see any CSS for animated, infinite, bounce or delay-2s. How does applying those classes initiate the animation? — Jacob Penney
– Jacob Penney, Commented Dec 13, 2019 at 0:46
@JacobPenney oh you know what the animations are a referenced stylesheet in the html from animate css. — JCA
– JCA, Commented Dec 13, 2019 at 0:48

Gabriel Vasile · Accepted Answer · 2019-12-13 00:56:45Z

1

You need to remove your old animation classes when clicking another button.

function removeAnimationClasses() {
  const buttons = userList.querySelectorAll("button");

  buttons.forEach(function(button) {
    button.classList.remove = 'animated infinite bounce delay-2s;';
  });
}


maleButton.addEventListener('click', () => {
    removeAnimationClasses();
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s'
    })
});
//making female characters bounce on page
let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    removeAnimationClasses();
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});
//making non gender characters bounce on page
let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    removeAnimationClasses();
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

What previous code has extra is

function removeAnimationClasses() {
  const buttons = userList.querySelectorAll("button");

  buttons.forEach(function(button) {
    button.classList.remove = 'animated infinite bounce delay-2s;';
  });
}

and removeAnimationClasses(); at the beginning of each .addEventListener('click'

answered Dec 13, 2019 at 0:56

Gabriel Vasile

2,3681 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JCA Over a year ago

The problem I am having with your solution is now I don't have an animation at all.

Gabriel Vasile Over a year ago

Of course no more animation. You probably misunderstood something and removed the next code: matchedDiv.className = 'animated infinite bounce delay-2s'. You need it.

Collectives™ on Stack Overflow

How to correctly filter data shown on screen in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related