Problème de variable innerHTML qui ne fonctionne pas au deuxième clic

Question

Dans un premier temps j'ai voulu faire apparaître le message avec une variable message et ecrire le code message.innerHTML = "texte a afficher"
Mon code fonctionnait dans un premier temps mais au deuxième click rien ne se passait. Tu peux m expliquer pourquoi s'il te plait .
Merci

Daniel Cephas Adié · Accepted Answer

Bonjour Patrick, je suis aussi un apprenant comme toi. Cependant avant que le formateur ne te revienne, j'ai ma petite idée à moi sur le probleme que tu rencontres. En fait le probléme vient de cette ligne : let message = document.body.innerHTML += "texte à afficher"; Ici, let message n'est pas vraiment utile et le fait de faire document.body.innerHTML += "texte à afficher" écrase completement tout ce qui était dans ton et recré un nouveau contenu semblable au précédent. Seulement que cette fois-ci ce nouveau bouton crée n'aura plus de proprieté JavaScript qui lui sera appliqué (l'événement listener est perdu) d'ou l'affichage d'un simple texte avec le btn que tu as créé dans ton html. Comme solution je te propose de créer à partir du JavaScript un élément

ou

qui va stocker le texte à afficher. Ainsi au lieu de red"finir tout ton , tu vas plutôt agir uniquement sur l'etat de cet element. document.createElement('p'); message.textContent = "texte à afficher"; document.body.appendChild(message); Bonne chance.

Louis-Nicolas Leuillet · Answer

Merci beaucoup, Patrick. Je vais essayer de t’aider.
Peux-tu me donner ton code complet, ici ou sur CodePen, afin que je puisse comprendre ce que tu veux dire ?

Patrick Rasteil · Answer

Louis-Nicolas Leuillet · Answer

Salut Daniel,
Bravo pour ton initiative d'aider Patrick, et en plus ton analyse est tout à fait correcte !
Tu as bien identifié le problème : quand on fait document.body.innerHTML += "quelque chose" , le navigateur reconstruit entièrement le DOM du body. Du coup, le bouton qu'on avait sélectionné avec querySelector n'existe plus vraiment : c'est un nouveau bouton, visuellement identique, mais sans l'event listener qu'on avait attaché.
Ta solution avec createElement est la bonne approche. Pour compléter, voici comment Patrick pourrait structurer son code :
let btn = document.querySelector('button');
let message = document.createElement('p');
message.textContent = "texte à afficher";
let hidden = true;
btn.addEventListener('click', () => {
if (hidden) {
btn.textContent = "Cacher";
document.body.appendChild(message);
hidden = false;
} else {
btn.textContent = "Afficher";
message.remove();
hidden = true;
}
});
L'astuce c'est de créer l'élément message une seule fois, en dehors du listener, puis de l'ajouter ou le retirer du DOM selon l'état. Et oui, message.remove() fonctionne parfaitement pour retirer un élément !
Continue comme ça, c'est super l'entraide entre apprenants.

Daniel Cephas Adié · Answer

merciiiiiiii

Patrick Rasteil · Answer

Merci à tous, vos réponses ont enrichi mes connaissances.

Problème de variable innerHTML qui ne fonctionne pas au deuxième clic

Formation JavaScript (legacy)