Bonjour,
j'ai une liste à puce qui affiche 5 lignes ainsi qu'un bouton reset et un button filter.
-Quand je click sur filter, toutes les lignes contenant le mot "Christmas" restent apparentes.
-Quand je click sur "reset" les lignes cachées devraient réapparaitre, mais ce n'est pas le cas.
Je sens qu'il manque un truc petit et insignifiant mais qui fait toute la différence entre un code qui fonctionne et le mien
Merci pour votre aide, voici le code:
j'ai une liste à puce qui affiche 5 lignes ainsi qu'un bouton reset et un button filter.
-Quand je click sur filter, toutes les lignes contenant le mot "Christmas" restent apparentes.
-Quand je click sur "reset" les lignes cachées devraient réapparaitre, mais ce n'est pas le cas.
Je sens qu'il manque un truc petit et insignifiant mais qui fait toute la différence entre un code qui fonctionne et le mien
Merci pour votre aide, voici le code:
<ul>
<li>Happy Birthday!</li>
<li>Merry Christmas my Love</li>
<li>A happy Christmas to all the Family</li>
<li>You're all I want for Christmas</li>
<li>Get well soon</li>
</ul>
<button class="reset">Reset</button>
<button class="filter">Filter</button>
var elementListe = document.querySelectorAll("li");
function filter() {
for (var i = 0; i < elementListe.length; i++) {
var eltListe = elementListe[i].textContent.toLowerCase();
if (eltListe.indexOf("christmas") === -1) {
elementListe[i].hidden = "true";
}
}
}
function reset() {
document.querySelectorAll('li').hidden = 'false';
}
var btnFilter = document.querySelector(".filter");
btnFilter.addEventListener("click", filter);
var btnReset = document.querySelector('.reset');
btnReset.addEventListener('click', reset);