Correction d'un bouton 'Afficher plus / Afficher moins' avec JavaScript

Bonjour les développeurs ! ?‍??‍?
Je suis un étudiant CS et j'apprends le javascript parce que je veux devenir développeur frontend, et aujourd'hui je voulais partager un concept que j'ai récemment appris en créant un simple bouton "Afficher plus / Afficher moins" à l'aide de JavaScript.
pouvez-vous dire quelle est la différence entre le premier code et le deuxième
et la sorcière est vraie !!

J'essayais de créer un bouton qui bascule la visibilité du texte, comme ceci :

simple html 2 paragraphe l'un d'eux avec la classe de texte texte caché
c'est celui que nous allons basculer et un bouton qui fera le travail

<p>lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>



<p>css:<br>
</p>

<pre class="brush:php;toolbar:false">.hidden-text {
  display: none;
}

J'ai déclaré toutes les variables dont j'avais besoin

let showButton = document.querySelector(".show-more");
let text = document.querySelector(".text");
let value = false; // Initially, the text is hidden

mon premier code était :

showButton.addEventListener("click", (value) => {
    value = !value;
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text
});

mais cela n'a pas fonctionné, la valeur était toujours fausse même si j'ai utilisé value=!value
après quelques recherches, j'ai découvert pourquoi cela s'est produit

Chaque fois que l'on cliquait sur le bouton, le paramètre de valeur locale à l'intérieur de la fonction de rappel était redéclaré, ce qui masquait la valeur externe.

cela signifie que la valeur externe reste inchangée, restant toujours fausse.
et La valeur locale est basculée à l'intérieur du rappel, mais elle n'existe que pendant l'exécution de cette fonction et n'affecte pas la valeur externe.

Pour résoudre ce problème, je devais supprimer le paramètre value du rappel et utiliser directement la valeur externe qui persiste lors des clics sur les boutons.

let value = false; // Persistent state variable

showButton.addEventListener("click", () => { 
    value = !value; // Toggle the outer value
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text based on value
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!