Informatique

Salut les kheys, je fais une fonction qui va filtrer des éléments du DOM en utilisant simplement un système de classe, le soucis, est que le paramètre de ma fonction el donne un undefined je ne comprends pas, j'ai jamais eu ce soucis auparavant voici le code :

const buttons = document.querySelectorAll('.kc-filtrestuiles--filters button');
const elements = document.querySelectorAll('.kc-filtrestuiles--content article');


    const filter = el =>{
    for(j=0;j<elements.length;j++){
        if(elements[j].classList.contains(el)){
            elements[j].classList.toggle('revealed');
        }
        else {
            elements[j].classList.remove('revealed');
            elements[j].classList.add('hidden');
        }
    }
   }

    for(i=0;i<buttons.length;i++){
        buttons[i].addEventListener('click', function(){
            filter(buttons[i]);
        }
    , false);
    }

À vue de pif :

• `elements[j].classList.contains(el)` ne pourra pas fonctionner car `el` n'est pas une chaine de caractère mais un Element (https://developer.mozilla.org/fr/docs/Web/API/Element)
• Dans ton callback de buttons[i].addEventListener, `buttons[i]` représentera toujours la dernière valeur que `buttons[i]` va avoir

Sans avoir testé, un truc comme ça pourra aider. Il faudra cependant définir ce que tu veux récupérer du bouton cliqué et tu que utilises ici `lement.classList.contains(button.??????)`.

const buttons = document.querySelectorAll('.kc-filtrestuiles--filters button')
const elements = document.querySelectorAll('.kc-filtrestuiles--content article')

const filter = (e) => {
    const button = e.target

    for (let element of elements) {
        if (element.classList.contains(button.??????)) {
            element.classList.toggle('revealed')
        } else {
            element.classList.remove('revealed')
            element.classList.add('hidden')
        }
    }
}


for (let button of buttons) {
    buttons.addEventListener('click', filter, false)
}