Javascript - zmiana ustęp Tekst na każdy przycisk Kliknij

Próbuję utworzyć 3 przyciski, a przy użyciu javascript Jeśli przycisk 1 kliknięciu następnie zmienia się tekst „Kliknij przycisk” „You wciśnięty przycisk 1”Javascript - zmiana ustęp Tekst na każdy przycisk Kliknij

To samo dotyczy przycisków 2 i 3! A jeśli zostanie naciśnięty przycisk 3, kolor tekstu zmieni się na ZIELONY

Jednak nie mogę go uruchomić! Każda pomoc będzie mile widziane

Oto mój bieżący kod:

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

Źródło

2015-04-22 GDesigns

Jesteś blisko, ale nie cygaro.

Aby poprawnie zidentyfikować kliknięty przycisk, należy wysłać this z wywołaniem funkcji, w ten sposób otrzymasz odwołanie do obiektu, który został kliknięty. Porównanie onclick w instrukcji if nie działa dobrze, ponieważ jest wskaźnikiem funkcji, a nie łańcuchem.

spróbować czegoś jak:

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

i twój changeText() powinien teraz być coś takiego. Możesz użyć tego przykładu, ale będziesz musiał sam wymyślić resztę. To powinno wskazać ci jednak właściwy kierunek.

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

Źródło

2015-04-22 16:45:48 jlindenbaum

Można spróbować to:

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

Oto co robisz jest po kliknięciu przycisku, funkcja onlick(); jest nazywany zawierający wartość elementu przycisku po prostu kliknął. Teraz cała funkcja changeText(); to edycja innerHTML elementu, który chcesz edytować. Bezpośrednio.

Mam nadzieję, że to pomoże.

zaktualizowany kod: (w celu odzwierciedlenia aktualizowane parametry)

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

Źródło

2015-04-22 16:47:07 shadoweye14

Próbuję również zmienić kolor tekstu na ZIELONY, jeśli zostanie naciśnięty przycisk 3 - zapomniałem wspomnieć powyżej – GDesigns

To jest w porządku. Możesz edytować swoją funkcję, ammending it, aby dołączyć instrukcję IF. 'if (value == 'Buttom 3') {/ * Tutaj zmienia się kod zmiany koloru * /}' możesz to zrobić, dodając atrybut style do elementu 'pText' i wstawiając tam swój kod CSS. 'style = 'color: green''etc nadzieję, że to pomoże: D – shadoweye14

Kod zaktualizowany :) – shadoweye14

Spróbuj tego:

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

Źródło

2015-04-22 16:48:42 Vijay

Kod jest doskonały. Problem polega jednak na tym, że obie pętle if są wykonywane sekwencyjnie tak szybko, że nie widać, kiedy pierwszy tekst zostanie przekonwertowany na drugi tekst. Spróbuj wstawić alert między dwoma połączeniami.

Źródło

2015-04-22 17:00:37 Saurabh

Javascript - zmiana ustęp Tekst na każdy przycisk Kliknij

Odpowiedz

Powiązane problemy