Filtrage liste

by Rouvière Valentin

HTML

<h1>Filtrage par catégorie</h1>

<button id="tous">tous</button>
<button id="ludique">ludique</button>
<button id="sportif">sportif</button>
<button id="pratique">pratique</button>

<article class="article ludique pratique">SurfacePro</article>
<article class="article ludique sportif">Ballon de rugby</article>
<article class="article pratique">Ventilateur</article>
<article class="article ludique">Rubik's cube</article>
<article class="article sportif">Chausure de Tennis</article>
<article class="article pratique">Porte-clés</article>
<article class="article pratique">Gps</article>
<article class="article ludique sportif">Raquette de tennis</article>
<article class="article sportif ludique">Boules de pétanque</article>
<article class="article ludique">Yoyo</article>

JavaScript

function changerDisplay (classe, valeur) {
	var articles = document.getElementsByClassName(classe);
  for (var i=0; i<articles.length; ++i) {
    articles[i].style.display = valeur;
  }  
}
document.getElementById('tous').onclick = function() {
  changerDisplay('article', 'block'); 
};

document.getElementById('ludique').onclick = function() {
  changerDisplay('article', 'none'); 
  changerDisplay('ludique', 'block'); 
};

document.getElementById('pratique').onclick = function() {
  changerDisplay('article', 'none'); 
  changerDisplay('pratique', 'block'); 
};

document.getElementById('sportif').onclick = function() {
  changerDisplay('article', 'none'); 
  changerDisplay('sportif', 'block');
};