Je veux vérifier si l'état de montrage pour modifier l'Innertext du bouton en fonction de celui-ci, mais lorsque je l'exécute, la déclaration d'autre ne fonctionne pas
let showBtn = document.querySelector('.show-more');
showBtn.onclick = function () {
let show = false;
if (show === false) {
showBtn.innerText = 'Show Less';
show = true;
} else {
showBtn.innerText = 'Show more';
}
}
4 Réponses :
Réinitialiser la valeur de l'affichage, chaque clic de cette façon.
p>
let showBtn = document.querySelector('.show-more');
show = false;
showBtn.onclick = function () {
if (show === false) {
showBtn.textContent= 'Show Less';
show = true;
} else {
show = false
showBtn.textContent= 'Show more';
}
}
L'état de l'IF ne fonctionne pas parce que vous avez défini le spectacle sur FALSE déjà dans la fonction. Si vous souhaitez que la déclaration IF passe à basculer, vous devez vérifier / conserver l'état du texte du bouton. Vous trouverez ci-dessous une façon de résoudre ce problème
PT2: vous devriez être en réglage de TextContent, pas Innertext (il s'agit d'un problème que je me suis effectivement couru plutôt récemment) P>
let showBtn = document.querySelector('.show-more');
showBtn.onclick = function () {
if (!this.show) {
showBtn.textContent = 'Show Less';
this.show = true;
} else {
showBtn.textContent = 'Show more';
this.show = false;
}
}
p> showbtn code> est faux à chaque clic dans votre code. Il ne faut pas l'affecter dans le gestionnaire onclick code>. Essayez ceci:
<button class="show-more" />Show</button>
Dans ce cas, n'attribuez pas votre variable d'état Quelqu'un ici a déjà donné une réponse, mais dans leur réponse, la déclaration variable est dans la portée mondiale. La plupart des gens sont d'accord que C'est pas A Bonne idée Pour déclarer des variables globales, notamment avec un tel nom général que Ces deux réponses StackoverFlow contiennent des exemples qui constituent un bon point de départ à la production de travail Code modulaire pour contrôler l'état de vos objets:
Fonction d'emballage: https://stackoverflow.com/a/50137216/1977609
Ceci est un autre moyen de mettre en œuvre votre bouton: https://stackoverflow.com/a/10452789/1977609 << / p> Soit Afficher à l'intérieur de la fonction d'appel. Lorsque vous faites cela, il initialisera la variable chaque fois que vous l'appelez. Cela provoque une question de performance (voir l'initialisation variable et la collecte des ordures) et en fonction de ce que vous voulez le faire va casser.
Afficher . Plus tard, lorsque votre base de code augmente, vous êtes susceptible de courir dans des conflits et votre code commencera à agir de manière à ne pas prédire. C'est probablement la convention de codage la plus universellement convenue. C'est une mauvaise habitude. Apprenez à le faire de la bonne façon maintenant.
Déplacez la déclaration de
Afficher en dehors de votre fonction et modifiezAfficher Retour surFALSE dans leel / code>Lorsque vous posez une question, il est utile de nous dire: obtenez-vous un message d'erreur ou un comportement inattendu?