web-dev-qa-db-fra.com

Changer le texte du bouton en cliquant

Lorsque je clique sur ce bouton, je souhaite que la valeur change. HTML:

<input onclick="change()" type="button" value="Open Curtain" id=myButton1"></input>

Javascript:

function change();
{
document.getElementById("myButton1").value="Close Curtain";
}

Le bouton affiche le rideau ouvert en ce moment et je veux le changer pour fermer le rideau, est-ce correct? 

javascriptbutton
48
Anthony Do

Si j'ai bien compris votre question, vous souhaitez basculer entre «Ouvrir le rideau» et «Fermer le rideau» - passer au «rideau ouvert» s'il est fermé ou inversement. Si c'est ce dont vous avez besoin, cela fonctionnera.

function change() // no ';' here
{
    if (this.value=="Close Curtain") this.value = "Open Curtain";
    else this.value = "Close Curtain";
}

Notez que vous n'avez pas besoin d'utiliser document.getElementById("myButton1") dedans change, comme il est appelé dans le context de myButton1 - ce que j'entends par contexte que vous apprendrez plus tard en lisant des livres sur JS.

METTRE &AGRAVE; JOUR:

J'avais tort. Pas comme je l'ai dit plus tôt, this ne fera pas référence à l'élément lui-même. Vous pouvez utiliser ceci:

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}
53
Parth Thakkar

Il semble qu'il n'y ait qu'une simple erreur de frappe:

  1. Supprimez le point-virgule après change (), il ne devrait pas y en avoir dans la déclaration de fonction
  2. Ajoutez une citation devant la déclaration myButton1.

Code corrigé:

<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
    document.getElementById("myButton1").value="Close Curtain"; 
}

Une solution plus rapide et plus simple consisterait à inclure le code dans votre bouton et à utiliser le mot-clé this pour accéder au bouton. 

<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />
13
Anders B

Il y a beaucoup de façons. Et cela devrait également fonctionner dans tous les navigateurs et vous n'avez plus à utiliser document.getElementById puisque vous passez l'élément lui-même à la fonction.

<input type="button" value="Open Curtain" onclick="return change(this);" />

<script type="text/javascript">
function change( el )
{
    if ( el.value === "Open Curtain" )
        el.value = "Close Curtain";
    else
        el.value = "Open Curtain";
}
</script>
8
user1865775

Si vous préférez lier vos événements en dehors du balisage HTML (dans le javascript), procédez comme suit:

document.getElementById("curtainInput").addEventListener(
  "click",
  function(event) {
    if (event.target.value === "Open Curtain") {
      event.target.value = "Close Curtain";
    } else {
      event.target.value = "Open Curtain";
    }
  },
  false
);
<!doctype html>
<html>
<body>
  <input 
         id="curtainInput" 
         type="button" 
         value="Open Curtain" />
</body>

</html>

1
PålOliver

Il vous manque une citation d'ouverture sur id = et vous avez un point-virgule après la déclaration de la fonction. En outre, la balise d'entrée n'a pas besoin d'une balise de fermeture.

Cela marche:

<input onclick="change()" type="button" value="Open Curtain" id="myButton1">

<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
1
Sp4cecat

cela peut être fait facilement avec un code vbs (comme je ne suis pas si familier avec js) 

<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open" 
end sub
</script>

et vous avez terminé, cependant cela change le nom pour afficher uniquement et ne change pas la fonction {onclick}, j'ai fait quelques recherches sur la façon de faire la seconde et semble ne pas y avoir

btn.onclick = ".."

mais j'ai trouvé un moyen d'utiliser la balise <"span"> comme suit:

<script Language="VBScript">
  Sub function1
  MsgBox "function1"
  span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
  End Sub

   Sub function2
  MsgBox "function2"
  span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
  End Sub
  </script>
  <body>
  <span id="span" name="span" >
  <input type="button" Value="button1" onclick="function1">
  </span>
  </body>

essayez vous-même, changez les codes dans sub function1 et sub function2, fondamentalement tout ce que vous devez savoir pour le faire en jscript est la ligne 

span.InnerHTML = "..."

le reste est votre code que vous voulez exécuter

espérons que cela aide: D

1
SixPackScript
<!DOCTYPE html>
<html>
    <head>
      <title>events2</title>
    </head>
    <body>
      <script>
        function fun() {
          document.getElementById("but").value = "onclickIChange";
        } 
      </script>
      <form>
        <input type="button" value="Button" onclick="fun()" id="but" name="but">
    </form>
  </body>
</html>
0
Kaustubh Deokar

Si vous n’êtes pas opposé à jQuery ou utilisez déjà jQuery, vous pouvez le faire sans l’approche consistant à avoir recours à js obtrusive. J'espère que ça aide. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript Vous souhaitez également faire référence à https://stackoverflow.com/a/3910750/4812515 pour une discussion à ce sujet.

HTML:

    <input type="button" value="Open Curtain" id=myButton1"></input>

Javascript:

          $('#myButton1').click(function() {
            var self = this;
            change(self);
         });

          function change( el ) {
           if ( el.value === "Open Curtain" )
           el.value = "Close Curtain";
           else
           el.value = "Open Curtain";
          }
0
alphapilgrim

Ajouter cette fonction au script

function myFunction() {

                var btn = document.getElementById("myButton");

                if (btn.value == "Open Curtain") {
                    btn.value = "Close Curtain";
                    btn.innerHTML = "Close Curtain";
                }
                else {
                    btn.value = "Open Curtain";
                    btn.innerHTML = "Open Curtain";
                }

            }

et éditer le bouton

<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>
0
Krisi Suci

CA marchait bien pour moi. Je souhaitais faire basculer le texte de la valeur d'entrée de "Ajouter une plage" à "Supprimer une plage"

<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />
0
Brian Bruman

Essaye ça,

<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
    ref.value="Close Curtain";
}
</script>
0
premnathcs
<input type="button" class="btn btn-default"  value="click me changtext"               id="myButton1" onClick="changetext()"  >

            <script>
            function changetext() {
                 var elem = document.getElementById("myButton1");
                if (elem.value=="click me change text")
                    { 
                        elem.value = "changed text here";
                    }
                else
                 {
                     elem.value = "click me change text";
                 }
            }
            </script>
0
Srikant gupta