J'essaie de créer un simple bouton à bascule en javascript.

Question

J'essaie de créer un simple bouton à bascule en javascript.

Demandé el 15 de Juin, 2010: Quand la question a-t-elle été
88759 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de créer un simple bouton à bascule en javascript. Cependant, le bouton ne peut que s'éteindre (OFF) et ne peut pas se rallumer (ON).

<html><head></head>
<script type="text/javascript">
function toggle(button)
{
  if(document.getElementById("1").value=="OFF"){
   document.getElementById("1").value="ON";}

  if(document.getElementById("1").value=="ON"){
   document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
       onclick="toggle(this);">
</form></body></html>

J'utilise : HP Netbook : Ubuntu Linux 10.04 : Firefox pour Ubuntu 1.0.

Demandé el 15 de Juin, 2010 par CDeanMartin

Answer 1

5 Réponses

Answer 2

20voto

Benoit Points 39210

Pourquoi tu passes le bouton si tu vas le chercher ?

De plus, puisque vous connaissez les valeurs possibles, vous n'avez besoin de vérifier que si c'est OFF, sinon, vous savez que c'est ON.

// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
  if (button.value == "OFF") {
    button.value = "ON";
  } else {
    button.value = "OFF";
  }
}

Si vous voulez être fantaisiste et économiser quelques octets, vous pouvez utiliser l'opérateur ternaire :

function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}

Répondu el 15 de Juin, 2010 par Benoit (39210 Points )

Answer 3

15voto

richsage Points 12266

Vos deux if sont exécutées l'une après l'autre, car vous modifiez la valeur, puis la relisez immédiatement et la modifiez à nouveau :

function toggle(button)
{
  if(document.getElementById("1").value=="OFF"){
   document.getElementById("1").value="ON";}

  else if(document.getElementById("1").value=="ON"){
   document.getElementById("1").value="OFF";}
}

Ajout de la else devrait empêcher cela de se produire.

Répondu el 15 de Juin, 2010 par richsage (12266 Points )

Answer 4

2voto

Jesus Romero Points 181

Une autre méthode pour y parvenir est la suivante :

var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;

button.addEventListener("click", function() {
if(isOrange) {
    body.style.background = "orange";
}else {
    body.style.background = "none";
}
isOrange = !isOrange;
});

Dans le JavaScript fichier.

/*****

NOTE ! Une autre méthode consiste à appliquer une classe à l'élément que l'on veut modifier.

El CSS doit avoir la classe avec le format que nous voulons :

.orange {
background: orange;
}

En dernier dans notre js nous devons seulement faire l'application de la classe :

var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("orange");
});

Salutations :)

Répondu el 20 de Mai, 2017 par Jesus Romero (181 Points )

Answer 5

1voto

Tester101 Points 2690

Pourquoi ne pas utiliser un interrupteur ?

function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}

Répondu el 15 de Juin, 2010 par Tester101 (2690 Points )

Answer 6

0voto

Anshuman Sharma Points 57

<html>
    <head>
        <script type="text/javascript">
            function toggle(button)
            {
              if(document.getElementById("1").value=="OFF")
              {
               document.getElementById("1").value="ON";
              }
              else
              {
                document.getElementById("1").value="OFF";
              }
            }
        </script>
    </head>
    <body>
        <form action="">
            <input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
        </form>
    </body> 
</html>

Répondu el 20 de Août, 2017 par Anshuman Sharma (57 Points )

J'essaie de créer un simple bouton à bascule en javascript.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

J'essaie de créer un simple bouton à bascule en javascript.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: