web-dev-qa-db-fra.com

Javascript - changer le texte du mot sur chaque clic de bouton

J'essaie de créer 3 boutons et en utilisant javascript. Si le bouton 1 est cliqué, le texte "Cliquez sur un bouton" devient "Vous avez appuyé sur le bouton 1"

Même chose pour les boutons 2 et 3! Et si le bouton 3 est enfoncé, la couleur du texte devient VERT

Cependant, je n'arrive pas à le faire fonctionner! Toute aide serait appréciée

Voici mon code actuel:

<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText() {

                var b1 = document.getElementById('b1');
                var b2 = document.getElementById('b2');
                var b3 = document.getElementById('b3');

                if(b1.onclick="changeText();") {
                    document.getElementById('pText').innerHTML = "You pressed button 1";
                }

                if(b2.onlick="changeText();") {
                    document.getElementById('pText').innerHTML = "You pressed Button 2";
                }

            }


        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText();"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText();"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText();"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
javascripthtmlfunctiontextonclick
10
GDesigns

Vous pouvez essayer ceci:

<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(value) {
                document.getElementById('pText').innerHTML = "You pressed " + value;
            }
        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>

Ici, ce que vous faites est que chaque fois que vous cliquez sur le bouton, la fonction onlick(); est appelée, elle contient la valeur de l’élément de bouton sur lequel vous venez de cliquer. Tout ce que la fonction changeText(); doit maintenant faire est d’éditer le innerHTML de l’élément à éditer. Directement.

J'espère que cela t'aides.

Code MISE À JOUR: (pour refléter vos paramètres mis à jour)

<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(value) {
                document.getElementById('pText').innerHTML = "You pressed " + value;
                if(value == "Button 3")
                {
                    document.getElementById('pText').setAttribute('style', 'color: green');}
                }
        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
12
shadoweye14

Essaye ça:

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(text) {
                document.getElementById('pText').innerHTML=text;

            }


        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText('You pressed Button 1');"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText('You pressed Button 2');"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText('You pressed Button 3');"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
1
Vijay

Votre code est parfait. Mais le problème est que les deux boucles if s'exécutent séquentiellement si rapidement que vous ne pouvez pas voir quand le premier texte est converti en deuxième texte . Essayez d'insérer une alerte entre deux appels.

1
Saurabh

Tu es proche, mais pas de cigare.

Pour identifier correctement le bouton sur lequel vous cliquez, vous devez envoyer this avec votre appel de fonction. Ainsi, vous obtenez une référence à l'objet sur lequel vous avez cliqué. Comparer la variable onclick dans une instruction if ne fonctionnera pas, car il s'agit d'un pointeur de fonction et non d'une chaîne.

Essayez quelque chose comme:

<input type="button" value="Button 1" id="b1" onclick="changeText(this);"/>

Et votre changeText() devrait maintenant ressembler à ceci. Vous pouvez utiliser cet exemple, mais vous devrez trouver le reste vous-même. Cela devrait cependant vous orienter dans la bonne direction.

function changeText(elementClicked) {
  var button1 = document.getElementById('b1');
  if (elementClicked == button1) {
    // button 1 was clicked
  }
}
0
jlindenbaum