javascript - HTML - An editable paragraph -
this code :
(html)
<html> <head> <title>editable paragraph</title> </head> <body> <label onclick="changetext(0);" class="edit-button"></label> <h1 id="h1">editable paragraph</h1> <br> <label onclick="changetext(1);" class="edit-button"></label> <p id="p1">hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! </p> <br> <label onclick="changetext(2);" class="edit-button"></label> <p id="p2">hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! </p> </body> <footer> <div id="newtext"> <input id="mynewtext" type="text" name="mynewtext"/> </div> </footer> </html> (css)
p { display:inline; } h1 { display:inline; } #newtext { position:fixed; left:5px; right:auto; top:auto; bottom:5px; width:auto; height:auto; background-color:#cccccc; } .edit-button { display:inline-block; height:20px; width:20px; background-color:#cccccc; } .edit-button:hover { background-color:#ffffff; } (js (not jquery))
/* smart tips 1. when adding / editing add <br> before new <label>. */ function changetext(var count){ switch (count) { case 0: document.getelementbyid("h1").innerhtml = document.getelementbyid("mynewtext").value; break; default: document.getelementbyid("p"+count).innerhtml = document.getelementbyid("mynewtext").value; } } after clicking button, nothing happened.
going try looking @ console.
this working case:
function changetext(count){ switch (count) { case 0: document.getelementbyid("h1").innerhtml = document.getelementbyid("mynewtext").value; break; default: document.getelementbyid("p"+count).innerhtml = document.getelementbyid("mynewtext").value; } }
Comments
Post a Comment