Basculer un bouton en JavaScript
Ce didacticiel expliquera comment basculer un bouton à l’aide d’instructions conditionnelles en JavaScript.
Basculer un bouton à l’aide d’instructions conditionnelles en JavaScript
Nous pouvons basculer un bouton en utilisant des instructions conditionnelles telles que l’instruction if-else en JavaScript. Nous pouvons basculer presque toutes les propriétés d’un élément comme sa valeur, sa classe, son identifiant et sa couleur en JavaScript.
Pour modifier une propriété d’un élément, nous devons obtenir l’élément en utilisant son identifiant ou sa classe. De plus, en utilisant le nom de la propriété, nous pouvons modifier la valeur de la propriété.
Par exemple, créons un bouton et modifions son texte interne en utilisant l’instruction if-else et la propriété value. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
Dans le programme ci-dessus, nous avons créé la fonction Buttontoggle(), qui sera appelée à chaque fois que l’utilisateur cliquera sur le bouton. Cela fera basculer le texte à l’intérieur du bouton.
Pour exécuter ce code, vous devez copier ce code dans un fichier HTML et ouvrir le fichier avec n’importe quel navigateur, et vous verrez le bouton. De la même manière, nous pouvons basculer n’importe quelle propriété d’un élément. Nous pouvons également utiliser une instruction switch au lieu d’une instruction if-else. Maintenant, basculons le texte à l’aide d’un bouton et d’une instruction if-else. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
Dans le code ci-dessus, nous avons utilisé un bouton pour basculer le texte d’un autre élément à l’aide de son identifiant. La propriété getElementById est utilisée pour récupérer l’élément en utilisant son identifiant, et la propriété innerHTML est utilisée pour récupérer le texte de l’élément div. Nous pouvons également basculer la classe d’un élément en utilisant la propriété classList.toggle().
Par exemple, créons un élément de texte et une feuille de style où nous définirons certaines propriétés de la classe myClass comme la largeur, le remplissage, la couleur d’arrière-plan, la couleur et la taille de la police. Nous pouvons maintenant utiliser la classe myClass et la propriété classList.toggle() pour basculer la classe de l’élément div. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
Dans le programme ci-dessus, nous avons créé un bouton qui servira à basculer la classe et un élément div dont la classe sera basculée. Nous avons utilisé la feuille de style pour définir certaines propriétés de la classe, qui seront appliquées au texte lorsque le bouton bascule sera cliqué.
