Comment basculer un bouton en javascript
- Comment basculer un bouton en javascript?
- Exemple 1: Modification des messages texte en basculé d'un bouton
- Exemple 2: bouton d'activation / désactivation en javascript
Comment basculer un bouton en javascript?
Une déclaration conditionnelle est une exigence de base pour basculer un bouton en JavaScript. Pour y parvenir, vous devez obtenir l'élément, puis une fonction personnalisée est appliquée pour appliquer une opération spécifique sur cet élément. La fonction est associée à l'événement onClick du bouton. De sorte que, chaque fois que le bouton est cliqué, cette fonction sera exécutée. Passons en pratique quelques exemples pour basculer un bouton en javascript.
Exemple 1: Modification des messages texte en basculé d'un bouton
Un exemple est considéré pour modifier un message en basculé d'un bouton en javascript. L'exemple comprend le code HTML et JavaScript, qui sont expliqués ci-dessous:
Code HTML
Exemple pour basculer un bouton
Appuyez sur le bouton pour voir la magie
Dans le code HTML, la description est la suivante:
- UN La balise est créée avec un "id = js".
- Après cela, un bouton est créé associé à un "Btntog ()" méthode. En appuyant "Bouton", la méthode "btntog ()" est déclenché.
- En fin de compte, le fichier javascript "test.JS " est passé comme SRC dansMots clés.
Le code du fichier JavaScript "test.js"Est fourni ici:
Code javascript
functionbtntog ()var t = document.GetElementById ("JS");
si (t.innerHtml == "Bienvenue sur Linuxhint")
t.innerhtml = "javascript world";
autre
t.innerhtml = "Bienvenue sur Linuxhint";
Dans ce code:
- getElementbyid est utilisé pour extraire l'élément HTML "js"Et la valeur est stockée dans une variable"t".
- Après cela, le innerhtml La propriété est employée dans la condition IF pour vérifier le texte "Bienvenue à Linuxhint".
- Si la condition est vraie, le contenu «Bienvenue à Linuxhint"Est remplacé par «Javascript World".
- Si la condition est fausse, le texte "Bienvenue à Linuxhint" est attribué en tant que contenu HTML à la balise div.
Sortir
La sortie montre que le basculement d'un bouton renvoie deux messages comme "Bienvenue à Linuxhint" et «Monde javascript» alternativement.
Exemple 2: bouton d'activation / désactivation en javascript
Un exemple est suivi pour modifier le texte en ligne du bouton. Dans cet exemple, le «ALLUMÉ ÉTEINT»Le texte modifiera alternativement la valeur en appuyant sur le bouton. Les codes HTML et JavaScript sont fournis ici:
Code HTML
Exemple pour basculer un bouton
onclick = "tggl ();">
Le code ci-dessus est décrit comme:
- Un bouton clickable ayant un identifiant de "Mybtn" est créé et sa valeur est définie sur "DÉSACTIVÉ".
- En appuyant sur le bouton, le tgl () la méthode sera déclenchée.
- À la fin, "test.JS " est attaché au chemin source à l'intérieur étiqueter.
Code javascript
functiontgl ()var t = document.getElementById ("mybtn");
si (t.valeur == "sur")
t.value = "off";
elseif (t.valeur == "off")
t.value = "on";
Dans ce code:
- UN tgl () La méthode est utilisée pour basculer un bouton en javascript.
- Dans cette méthode, vous extraire l'élément HTML en utilisant le getElementbyid propriété, puis l'instruction if else-if y est ajouté.
- Si la "Valeur == ON", basculer la valeur de "DÉSACTIVÉ". Si la valeur est DÉSACTIVÉ, Ensuite, la valeur sera basée sur «SUR".
Sortir
La sortie montre que le bouton a été basculé à partir de DÉSACTIVÉ pour SUR.
C'est tout! Vous avez appris à basculer un bouton en javascript.
Conclusion
En JavaScript, un bouton peut être utilisé pour basculer entre différents états de ses propres valeurs, ou toute fonction peut être associée à l'opération de bascule. Le sur clic() L'événement du bouton est associé à la fonction. Cet article explique un aperçu de la mise en œuvre d'un bouton avec deux exemples pratiques. Le premier exemple extrait le texte par le innerhtml la propriété et la modifie à travers un bouton à bascule. Dans le deuxième exemple, la valeur du bouton lui-même est modifiée à l'aide d'une fonction personnalisée.