Faire un bouton de basculement simple en javascript

"Basculer"Est un terme qui fait référence à la capacité de basculer quelque chose entre deux états ou valeurs différents. Dans divers scénarios, les développeurs doivent créer un bouton basculer sur une page Web, comme l'affichage et la cachette de contenu sur une page, en cliquant sur le commutateur pour basculer entre deux états, "sur" et "désactivé", et ainsi de suite.

Ce blog décrira la méthode pour créer un bouton de bascule simple dans JavaScript.

Comment faire un bouton de bascule simple en JavaScript?

Pour faire un bouton à bascule simple, utilisez la logique conditionnelle simple avec le «valeur”Attribut pour modifier l'état ou la valeur du bouton.

Exemple 1: basculer l'état du bouton

Dans un fichier HTML, créez un bouton et joignez un "sur clic»Événement qui appellera la fonction sur un bouton CLIC:

Définir une fonction "basculer()"Dans le fichier javascript ou la balise qui se déclenchera sur le bouton CLIC:

functiontoggle ()

Var Button = Document.getElementById ("btn");
if (bouton.valeur == "accepter")

bouton.value = "rejeter";

Elseif (bouton.valeur == "rejeter")

bouton.value = "accepter";

Dans la fonction défini ci-dessus:

• Tout d'abord, obtenez la référence du bouton en utilisant son ID assigné à l'aide du «getElementByid ()" méthode.
• Utilisez l'instruction conditionnelle et modifiez la valeur ou l'état du bouton. Définissez la valeur sur "Rejeter"S'il est égal à"Accepter".
• Si la valeur du bouton est «Rejeter», Réglez-le sur«Accepter".

Sortir

Exemple 2: basculer l'état du bouton avec la couleur

Vous pouvez également basculer le style avec la valeur du bouton en utilisant le "style" attribut:

functiontoggle ()

Var Button = Document.getElementById ("btn");
if (bouton.valeur == "accepter")

bouton.value = "rejeter";
document.getElementByid ("btn").style.fond = "rouge";

Elseif (bouton.valeur == "rejeter")

bouton.value = "accepter";
document.getElementByid ("btn").style.arrière-plan = "jaune";

Comme vous pouvez le voir dans la sortie, le bouton modifie sa valeur et sa couleur sur le bouton CLIC:

Exemple 3: basculer le texte

Ici, nous allons basculer le texte sur le bouton cliquer. Dans un fichier html, créez d'abord un bouton et un texte en utilisant

Tag qui ne sera pas affichée sur la page:

Bienvenue à Linuxhint

Définissez une fonction qui affichera le texte sur la page Web en cliquant sur le bouton:

functiontoggle ()

var text = document.GetElementById ("Bienvenue");
si (texte.style.affiche === 'non')
texte.style.display = 'block';
autre
texte.style.affiche = 'aucun';

Sortir

Nous avons rassemblé toutes les informations essentielles liées à la création d'un simple bouton de basculement en javascript.

Conclusion

Pour créer un bouton de bascule simple, utilisez les instructions logiques conditionnelles avec le «valeur”Attribut pour modifier l'état ou la valeur du bouton. Un bouton à bascule est un élément d'interface utilisateur utile qui peut aider à améliorer la fonctionnalité et la convivialité des applications JavaScript. Ce blog a décrit la procédure pour créer un bouton de bascule simple en JavaScript avec des exemples détaillés.