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
Post a Comment