Dans le premier chapitre de cette partie du cours, vous avez affiché toutes les pièces automobiles grâce à la boucle for. Cependant, lorsque vous avez modifié la liste des pièces pour la trier, l’ordonner et générer une liste des noms des pièces disponibles, tout cela s’est fait en mémoire. Cela n’a donc pas été reflété sur la page web. Découvrons ensemble comment mettre à jour votre page web !
Découvrez la propriété innerHTML
Le DOM offre la possibilité de modifier le contenu des balises. Nous avons déjà rencontré la propriété innerText pour modifier le texte d’une balise. Souvenez-vous, cela nous a été utile pour remplir la description ou la catégorie dans les balises p de notre page web dans le chapitre 4 de la première partie de ce cours.
Par exemple, je pourrais écrire le code suivant pour ajouter tous les éléments d’une fiche produit en une seule fois :
document.body.innerHTML = '<article>'
+ '<img src="' + piece.image + '" />'
+ '<h2>' + piece.nom + '</h2>'
// ...
+ '</article>'Nous n’avons pas employé cette méthode jusqu’à présent car elle utilise beaucoup de concaténation, ce qui rend le code peu lisible. L’astuce que nous allons utiliser ici est d’assigner une chaîne de caractères vide afin d’effacer l’écran.
Allons- y :
// Efface le contenu de la balise body et donc l’écran
document.querySelector(".fiches").innerHTML = '';Et voilà le résultat :
L’écran est à nouveau vierge, et nous pouvons faire appel au code des chapitres précédents pour mettre à jour la page web.
Utilisez la propriété innerHTML pour mettre à jour l’affichage
Maintenant que la propriété innerHTML vous est familière, utilisons-la pour mettre à jour notre affichage ! 😎
Le code source final nous permettra de :
générer une première fois la page web ;
enregistrer des listeners sur les boutons ;
manipuler la liste des pièces ;
mettre à jour l’affichage.
Je l’appelle une première fois juste après sa déclaration pour générer la page une première fois. Ensuite, après chaque effacement de l’écran avec innerHTML, j’appelle à nouveau la fonction pour mettre à jour l’affichage. Le fait de rendre configurable la liste des pièces à afficher permet de fournir à la fonction soit :
la liste originale ;
la liste réordonnée ;
la liste filtrée.
Le code est donc modulaire et plus robuste.
// Récupération des pièces depuis le fichier JSON
const pieces = await fetch("pieces-autos.json").then(pieces => pieces.json());
// Fonction qui génère toute la page web
function genererPieces(pieces) {
for (let i = 0; i < pieces.length; i++) {
// Création d’une balise dédiée à une pièce auto
const pieceElement = document.createElement("article");
// On crée l’élément img.
const imageElement = document.createElement("img");
// On accède à l’indice i de la liste pieces pour configurer la source de l’image.
imageElement.src = pieces[i].image;
// On rattache l’image à pieceElement (la balise article)
pieceElement.appendChild(imageElement);
// Idem pour le nom, le prix et la catégorie ...
// ...
// On rattache la balise article au body
document.body.appendChild(pieceElement);
}
}
// Premier affichage de la page
genererPieces(pieces);
// Ajout du listener pour trier les pièces par ordre de prix croissant
const boutonTrier = document.querySelector(".btn-trier");
boutonTrier.addEventListener("click", function () {
const piecesOrdonnees = Array.from(pieces)
piecesOrdonnees.sort(function (a, b) {
return b.prix - a.prix;
});
// Effacement de l'écran et regénération de la page
document.querySelector(".fiches").innerHTML = "";
genererPieces(piecesOrdonnees);
});
// Ajout du listener pour filtrer les pièces non abordables
const boutonFiltrer = document.querySelector(".btn-filtrer");
boutonFiltrer.addEventListener("click", function () {
const piecesFiltrees = pieces.filter(function (piece) {
return piece.disponibilite;
});
// Effacement de l'écran et regénération de la page avec les pièces filtrées uniquement
document.querySelector(".fiches").innerHTML = "";
genererPieces(piecesFiltrees);
});
Et voilà, votre page web est désormais interactive. Toutes mes félicitations !!! 🥳
À vous de jouer !
Depuis les fichiers index.html et pieces.js de la branche P2C3-Exercice :
ajoutez une balise input de type range dans la page web, représentant le prix maximum pour filtrer les pièces :
valeur min : 0
valeur max : 60
step: 5.
Corrigé
Vous pouvez vérifier votre travail en consultant la branche P2C3-Solution et en regardant la vidéo ci-dessous :
En résumé
La propriété innerHTML permet d’effacer ou de remplacer le contenu d’un élément du DOM.
En manipulant le DOM, vous pouvez générer une nouvelle version de la page web.
La combinaison de ces deux opérations permet de mettre à jour la page lorsque l’utilisateur interagit avec elle.
Vous savez désormais comment rendre une page web interactive ! Toutes mes félicitations ! 🥳 Dans la deuxième partie du cours, vous apprendrez comment la faire interagir avec un service web. Mais avant, je vous propose de tester vos connaissances en réalisant le quiz.
