wake-up-neo.net

Javascript - Absatztext bei jedem Button ändern Klicken Sie auf

Ich versuche, 3 Schaltflächen zu erstellen und Javascript zu verwenden. Wenn Sie auf die Schaltfläche 1 klicken, wird der Text "Klicken Sie auf eine Schaltfläche" in "Sie haben die Schaltfläche 1 gedrückt" geändert.

Gleiches für Button 2 und 3! Und wenn Button 3 gedrückt wird, ändert sich die Textfarbe in GRÜN

Ich kann es jedoch nicht schaffen, dass es funktioniert! Jede Hilfe wäre dankbar

Hier ist mein aktueller 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>
10
GDesigns

Sie können dies versuchen:

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

Wenn Sie auf die Schaltfläche klicken, wird die Funktion onlick(); aufgerufen, die den Wert des gerade angeklickten Schaltflächenelements enthält. Jetzt muss die Funktion changeText(); nur die innerHTML des Elements bearbeiten, das Sie bearbeiten möchten. Direkt.

Hoffe das hilft.

AKTUALISIERTER Code: (Um Ihre aktualisierten Parameter wiederzugeben)

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

Versuche 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>
1
Vijay

Ihr Code ist perfekt. Das Problem ist jedoch, dass beide if-Schleifen sequenziell so schnell ausgeführt werden, dass Sie nicht erkennen können, wann der erste Text in zweiten Text konvertiert wird. Versuchen Sie, einen Alarm zwischen zwei Aufrufen einzufügen.

1
Saurabh

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

Um die Schaltfläche, auf die Sie klicken, richtig zu identifizieren, müssen Sie mit Ihrem Funktionsaufruf this senden. Auf diese Weise erhalten Sie eine Referenz auf das angeklickte Objekt. Der Vergleich von onclick in einer if-Anweisung funktioniert nicht gut, da es sich um einen Funktionszeiger und nicht um einen String handelt.

Versuchen Sie etwas wie:

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

Und Ihre changeText() sollte jetzt so aussehen. Sie können dieses Beispiel verwenden, aber Sie müssen den Rest selbst herausfinden. Dies sollte Sie jedoch in die richtige Richtung weisen.

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