Javascript - Änderung Absatz Text auf jedem Knopf klicken

I 3 Tasten erstellen bin versucht, und mit Hilfe von Javascript, wenn die Taste 1 gedrückt wird, dann ändert er der Text „eine Schaltfläche, um“ auf „Sie haben die Taste Taste 1“Javascript - Änderung Absatz Text auf jedem Knopf klicken

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

Allerdings kann ich nicht scheinen es zu arbeiten! Jede mögliche Hilfe würde

geschätzt werden Hier ist meine aktuellen 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>

Quelle

2015-04-22 GDesigns

Sie sind in der Nähe, aber keine Zigarre.

Um die Schaltfläche, auf die Sie klicken, richtig zu identifizieren, senden Sie this mit Ihrem Funktionsaufruf, auf diese Weise erhalten Sie einen Verweis auf das Objekt, auf das geklickt wurde. Das Vergleichen der onclick in einer if-Anweisung wird nicht gut funktionieren, da es ein Funktionszeiger ist, keine Zeichenfolge.

Probieren Sie etwas wie:

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

Und Ihre changeText() jetzt sollte so etwas sein. 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 
    } 
}

Quelle

2015-04-22 16:45:48 jlindenbaum

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>

Hier ist, was Sie tun, ist, wenn Sie auf die Schaltfläche klicken, die onlick(); Funktion aufgerufen wird, um den Wert des Knopfelements enthält, die Sie gerade geklickt. Alle changeText(); Funktion muss jetzt tun, ist die innereHTML des Elements bearbeiten Sie bearbeiten möchten. Direkt.

Hoffe, das hilft.

AKTUALISIERT Code:

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

Quelle

2015-04-22 16:47:07 shadoweye14

Ich versuche auch, die Farbe des Textes auf GRÜN zu ändern, wenn Taste 3 gedrückt wird - vergessen zu erwähnen – GDesigns

Das ist okay. Sie können Ihre Funktion bearbeiten, indem Sie sie zu einer IF-Anweisung hinzufügen. 'if (Wert == 'Buttom 3') {/ * Code zum Ändern der Farbe geht hier * /}' Sie können das tun, indem Sie das Attribut style zum 'pText' Element hinzufügen und Ihren CSS Code einfügen. 'style = 'color: green''etc hoffe das hilft: D – shadoweye14

Code aktualisiert :) – shadoweye14

diese (zu Ihrer aktualisierten Parameter zu reflektieren) Versuchen:

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

Quelle

2015-04-22 16:48:42 Vijay

Ihr Code perfekt ist. Das Problem ist jedoch, dass beide if-Schleifen nacheinander so schnell ausgeführt werden, dass Sie nicht sehen können, wann der erste Text in den zweiten Text konvertiert wird. Versuchen Sie, eine Warnung zwischen zwei Anrufen einzufügen.

Quelle

2015-04-22 17:00:37 Saurabh

Javascript - Änderung Absatz Text auf jedem Knopf klicken

Antwort

Verwandte Themen