Bouton ON OFF Chanement de couleur

Par Laurent L., il y a 4 ans

Les bases HTML/CSS
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux

Décrivez ce que vous cherchez à obtenir.

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

4 réponses

Laurent L., il y a 4 ans

Bonjour j'aimerais que le bouton ON OFF chane de couleur OFF = rouge et ON = vert. Pourriez vous m'aider sur la syntaxe à ajouter? Comment puis je faire aussi pour que le bouton conserve la même taille quand le texte change. merci bcp

<!DOCTYPE html>
<html>

<head>
<title>
Change the Text of a Button using jQuery
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>

<body style="text-align:center;">

<button id="F1" style="background-color:red" >OFF</button>

<script>
$(document).ready(function(){
$("#F1").click(function(){
$(this).text($(this).text() == 'OFF' ? 'ON': 'OFF');

    });
});

</script>
</body>

</html>

Arzou, il y a 4 ans

Hello,
le plus simple pour moi serait de rajouter une classe et de l'enlever au click. Et cette classe change juste la couleur .. je ne vois pas ce que le changement de taille vient faire la :)

document.getElementById('f1').onclick = function() { this.classList.toggle('active'); }

et ton css par exemple :

#f1 { color: red; } #f1.active { color: green; }
Laurent L., il y a 4 ans

Merci Arzou. Du coup mon html peut être:
<button class="mybutton" id="F1" style="background-color:red">OFF</button>

et mon javascript:
document.getElementById('mybutton').onclick=function() {this.classList.toggle('active');}

et mon script css cmme tu as mis?

est ce correct?

Arzou, il y a 4 ans

Je te conseille d'avoir un fichier css a part, et de ne pas mettre ton style dans le html.
Et mon css oui, enfin .. non parce que la il ne va changer que la couleur, et non pas le background ;)
Donc remplace color par background-color et c'est good