Javascript ändern von Absatz Text auf Jeder Schaltfläche Klicken

Ich versuche zu erstellen, die 3 Tasten, und mit javascript, Wenn button 1 geklickt wird, dann ändert sich die "Klicken Sie auf die Taste" text "drücken Taste 1"

Gleiche für Button 2 und 3! Und wenn die Taste 3 gedrückt wird, wird die text-Farbe wechselt zu GRÜN

Aber ich kann nicht scheinen, um es an die Arbeit! Jede Hilfe würde geschätzt

Hier ist mein Derzeitiger Code:

<!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>

InformationsquelleAutor GDesigns | 2015-04-22

Können Sie versuchen, diese:

<!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>

Hier, was Sie tun, wenn Sie klicken Sie auf die Schaltfläche, die onlick(); - Funktion aufgerufen wird mit dem Wert des button-element, die Sie gerade geklickt haben. Alle changeText(); Funktion hat jetzt zu tun ist, Bearbeiten Sie die innerHTML des Elements, das Sie Bearbeiten möchten. Direkt.

Hoffe, das hilft.

AKTUALISIERTEN Code: (entsprechend den aktualisierten Parametern)

<!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>

Ich bin auch versuchen, ändern Sie die Farbe des Textes zu GRÜN, wenn die Taste 3 gedrückt wird - vergessen zu erwähnen oben
Das ist in Ordnung. Sie können Ihre Funktion durch ammending es auch eine IF-Anweisung. if(value == 'Buttom 3'){/* Code for changing color goes here */} Sie können tun, dass durch das hinzufügen der style-Attribut zu pText element und einfügen von CSS-Code in es. style='color: green'usw. hoffe das hilft 😀
Code aktualisiert 🙂

InformationsquelleAutor shadoweye14

Versuchen Sie dies:

<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>

InformationsquelleAutor Vijay

1

Dein code ist perfekt. Aber das problem ist, dass sowohl die if-Schleifen ausgeführt werden nacheinander so schnell, dass Sie können nicht sehen, Wann der erste text umgewandelt wird, um den zweiten text.
Versuchen Sie, eine Warnung zwischen zwei Anrufe.

InformationsquelleAutor Saurabh
0

Du bist in der Nähe, aber keine Zigarre.

Richtig zu identifizieren, die den button Sie anklicken, sollten Sie senden in this mit Ihrer Funktion aufrufen, so erhalten Sie eine Referenz auf das Objekt, auf das geklickt wurde. Vergleich der onclick in einer if-Anweisung funktioniert nicht gut, da es eine Funktion Zeiger, nicht einen string.

Probieren Sie etwas wie:
```
<input type="button" value="Button 1" id="b1" onclick="changeText(this);"/>
```
Und Ihre changeText() sollte nun so etwas wie dieses. Sie können dieses Beispiel verwenden, aber Sie haben, um herauszufinden, den rest auf eigene Faust. Dies sollte zeigen Sie in die richtige Richtung obwohl.
```
function changeText(elementClicked) {
  var button1 = document.getElementById('b1');
  if (elementClicked == button1) {
    //button 1 was clicked
  }
}
```
InformationsquelleAutor jlindenbaum

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.