使用Javascript - 每個按鈕更改段落文本單擊

我想創建3個按鍵，並使用JavaScript，如果按鈕1，點擊，然後它改變了「點擊按鈕」文本「你按下按鈕1」使用Javascript - 每個按鈕更改段落文本單擊

按鈕2和3也一樣！ 如果按下按鈕3，文本顏色會變爲綠色

但是，我似乎無法讓它工作！任何幫助，將不勝感激

這裏是我當前的代碼：

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

來源

2015-04-22 GDesigns

你接近，但沒有雪茄。

要正確識別您點擊的按鈕，您應該在函數調用中發送this，這樣您可以獲得對被點擊的對象的引用。在if語句中比較onclick將無法正常工作，因爲它是一個函數指針，而不是一個字符串。

嘗試類似：

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

和你changeText()現在應該是這樣的。你可以使用這個例子，但是你必須自己找出其餘的。這應該指出你在正確的方向。

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

來源

2015-04-22 16:45:48 jlindenbaum

你可以試試這個：

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

在這裏，你在做什麼，是隻要你單擊該按鈕，onlick();函數被調用包含您剛剛點擊該按鈕元素的值。所有changeText();函數現在要做的就是編輯要編輯的元素的innerHTML。直。

希望這會有所幫助。

更新的代碼：（爲了反映更新後的參數）

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

來源

2015-04-22 16:47:07 shadoweye14

我也想，如果按鈕3被壓到文本的顏色變成綠色 - 忘了提及上述 – GDesigns

這是正常情況。您可以通過修改它來包含IF語句來編輯您的函數。 'if（value =='Buttom 3'）{/ *改變顏色的代碼放在這裏* /}'你可以通過在'pText'元素中添加style屬性並在其中插入你的CSS代碼來做到這一點。 'style ='color：green''etc希望這有助於：D – shadoweye14

代碼更新:) – shadoweye14

試試這個：

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

來源

2015-04-22 16:48:42 Vijay

你的代碼是完美的。但問題是，兩個if循環順序執行得如此之快，以致於當第一個文本被轉換爲第二個文本時，您無法看到。嘗試在兩次通話之間插入警報。

來源

2015-04-22 17:00:37 Saurabh

使用Javascript - 每個按鈕更改段落文本單擊

回答

相關問題