Geek Answers Handbook

Javascript - change paragraph text on each button

I am trying to create 3 buttons and use javascript, if button 1 is pressed, it changes the text "Press the button" to "You pressed the button 1"

The same goes for buttons 2 and 3! And if you press button 3, the text color will change to GREEN

However, I can’t get it to work! Any help would be appreciated

Here is my current 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>
+7
javascript function html text onclick
source share
4 answers

You can try the following:

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

Here you do, when you click the button, the onlick(); function is onlick(); containing the value of the button element you just clicked. Now all the functions changeText(); must edit the innerHTML of the element you want to edit. Directly.

Hope this helps.

UPDATED Code: (to reflect updated settings)

 <!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>
+10
source share

Your code is beautiful. But the problem is that both if loops execute sequentially so fast that you cannot see when the first text is converted to the second text. Try turning on the alert between two calls.

+1
source share

You are close, but there is no cigar.

In order to correctly identify the button that you click, you must send your function call to this , so you get a link to the object that was clicked. Comparing onclick in an if statement will not work correctly, as it is a pointer to a function, not a string.

Try something like:

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

And your changeText() should now be something like this. You can use this example, but you will have to figure out the rest yourself. This should point you in the right direction.

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

Try the following:

 <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>
0
source share

More articles:


All Articles