Problème de condition if avec addEventListener en JavaScript

Question

Bonjour, je suis partie sur cette idée d'écrire la balise totalement dans le HTML, mais je ne comprends pas pourquoi ça ne marche qu'avec la première partie ? Merci
Voici mon code :
btn = document.querySelector('button');
phrase = document.createElement('div');
document.body.append(phrase);
function afficher(){
phrase.innerHTML = ' Le text est visible
';
btn.innerHTML = 'Cacher';
};
function cacher(){
phrase.innerHTML = ' Le text est visible
';
btn.innerHTML = 'Afficher';
};
if(btn.textContent = 'Afficher'){
btn.addEventListener('click', afficher);
}else{
btn.addEventListener('click', cacher);
};

Louis-Nicolas Leuillet · Accepted Answer

Absolument ton problème vient du == mais également du fait que tu n'attachais pas l'événement qu'il fallait au click du bouton : comme par défaut le texte est "Afficher" tu avais toujours l'événement pour détecter le clic sur le bouton "Afficher" qui fonctionnait. Mais le code JavaScript n'est lancé qu'au chargement de la page donc quand plus tard ton texte est modifié, ton addEventListener ne s'ajoute pas pour "Cacher".

Louis-Nicolas Leuillet · Answer

Hello Mireille,
Peux-tu ajouter ton code sur CodePen avec le HTML afin que je puisse t'aider ?

Mireille Emonot · Answer

Bien sûr, voici le lien, merci : https://codepen.io/Mireille-EMONOT/pen/RNwgMgo

Louis-Nicolas Leuillet · Answer

Merci ! Effectivement plusieurs problèmes comme par exemple ta condition "btn.textContent = 'Afficher' qui assigne une valeur plutôt que de la comparer (==).
Voici une autre version : https://codepen.io/believemy/pen/emYGxRd

Mireille Emonot · Answer

Merci, je vais corriger, et franchement bravo pour les cours, et les exos, c'est limpide, je n'avais pas fait de javascript depuis un moment, mais je me régale

Louis-Nicolas Leuillet · Answer

C'est très sympa ! Merci beaucoup 💫

Mireille Emonot · Answer

Du coup, je viens de jeter un coup d'oeil, et effectivement, c'est une solution très propre, que je comprends tout à fait, comme j'avais compris la correction, mais je voulais juste comprendre par curiosité pourquoi je ne pouvais pas utiliser la création de hidden (même si c'est plus poussif) ? Et du coup, c'est seulement à cause du == ? Ou il y avait un autre problème. Je vais réessayer.... Merci

Problème de condition if avec addEventListener en JavaScript

Formation JavaScript (legacy)