html - Javascript - change paragraph Text on Each Button Click -


i trying create 3 buttons, , using javascript, if button 1 clicked changes "click button" text "you pressed button 1"

same button 2 , 3! and if button 3 pressed, text colour changes green

however, can't seem work! appreciated

here 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 button</p>     </body> </html> 

you can try this:

<!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 button</p>     </body> </html> 

here doing whenever click button, onlick(); function being called containing value of button element clicked. changetext(); function has edit innerhtml of element want edit. directly.

hope helps.

updated code: (to reflect updated parameters)

<!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 button</p>     </body> </html> 

Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -