javascript - How to replace html button with plain text -
how replace button whatever words on button before? looking @ answer similar question, said use like:
var mybtn = document.getelementbyid("buttonid"), myspan = document.createelement("span"); myspan.innerhtml = mybtn.innerhtml ; mybtn .parentnode.replacechild(myspan, mybtn); but had made other buttons change. know way change button regular text?
i know that code works itself, doesn't work code reason, don't care what's wrong code. i'm wondering if knows way it.
thanks
<!doctype html> <head> <title></title> </head> <body> <div id="mydiv"> <input type="button" value="change text" id="submit" onclick="change()"> <!--button input trigger event named change--> </div> </body> </html> <script type="text/javascript"> function change(){ //function run when click on button... var buttonvalue = document.getelementbyid("submit").value; //stores button value document.getelementbyid("mydiv").innerhtml = buttonvalue; // displays value plain text inside "mydiv" - removing button input entirely } </script> edit: i've noticed had multiple buttons in page, make previous example wrong. heres make work easier think in case add buttons:
first heres code:
<!doctype html> <html> <head> <title></title> </head> <body> <ul> <li id="id_1"><input type="button" value="change text" onclick="change(1)" id="button_1"></li> <li id="id_2"><input type="button" value="change text" onclick="change(2)" id="button_2"></li> <li id="id_3"><input type="button" value="change text" onclick="change(3)" id="button_3"></li> </ul> </body> </html> <script type="text/javascript"> var id; function change(id){ var buttonvalue = document.getelementbyid("button_"+id).value; document.getelementbyid("id_"+id).innerhtml = buttonvalue; } </script> in html part, can create list (li) of buttons if that's layout... each list have own id, in case id_x used later when replace content. each button calls function change(id) while id unique number each button.
in js part, change(id) gets id of button clicked, takes value, , replaces innerhtml (content) of relative list items plain text.
let me know if still need other help.
Comments
Post a Comment