Comment basculer un bouton en JavaScript

• Comment basculer un bouton en JavaScript ?
• Exemple 1 : Modifier des messages texte en basculant un bouton
• Exemple 2 : Basculer le bouton ON/OFF en JavaScript

Comment basculer un bouton en JavaScript ?

Une instruction conditionnelle est une exigence de base pour basculer un bouton en JavaScript. Pour ce faire, 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. Ainsi, chaque fois que le bouton est cliqué, cette fonction sera exécutée. Pratiquons quelques exemples pour basculer un bouton en JavaScript.

Exemple 1 : Modifier des messages texte en basculant un bouton

Un exemple est considéré pour modifier un message en basculant un bouton en JavaScript. L'exemple comprend du code HTML et JavaScript, qui sont expliqués ci-dessous :

Code HTML

En code HTML, la description est la suivante :

• UN
  tag est créé avec un ' identifiant=js ”.
• Après cela, un bouton est créé associé à un 'btntog()' méthode. En appuyant 'Bouton' , la méthode ' btntog() ' est déclenché.
• Au final, le fichier JavaScript 'test.js' est passé comme src dans
  

  ---

  Code Javascript

  fonctionbtntog ( )
  {
  où = document. getElementById ( 'js' ) ;
  si ( t. innerHTML == 'Bienvenue sur Linuxhint' ) {
  t. innerHTML = 'Monde JavaScript' ; }
  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 sur Linuxhint ”.
  • Si la condition est vraie, le contenu ' Bienvenue sur Linuxhint ' est remplacé par 'Monde JavaScript “.
  • Si la condition est fausse, le texte 'Bienvenue sur Linuxhint' est affecté en tant que contenu HTML à la balise div.

  Production

  

  La sortie montre que le basculement d'un bouton renvoie deux messages comme 'Bienvenue sur Linuxhint' et 'Monde JavaScript' alternativement.

  Exemple 2 : Basculer le bouton ON/OFF en JavaScript

  Un exemple est suivi pour modifier le texte en ligne du bouton. Dans cet exemple, le ' ALLUMÉ ÉTEINT ” le texte changera alternativement la valeur en appuyant sur le bouton. Les codes HTML et JavaScript sont fournis ici :

  Code HTML

  < html >
  
  < h2 > Exemple pour basculer un bouton h2 >
  
  < type d'entrée = 'bouton' identifiant = 'monBtn' évaluer = 'À L'ARRÊT'
  
  sur clic = 'Date();' >
  
  < source de script = 'test.js' > scénario >
  
  html >

  Le code ci-dessus est décrit comme suit :

  • Un bouton cliquable ayant un identifiant de 'monBtn' est créé et sa valeur est définie sur 'À L'ARRÊT' .
  • En appuyant sur le bouton, le Date() méthode sera déclenchée.
  • À la fin, 'test.js' est attaché au chemin source dans