使用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 - 每个按钮更改段落文本单击

回答

相关问题