<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>簡易留言板</title> </head> <body> 留言區域:<textarea id="content" type="text"></textarea><br /> 顯示留言區域:<div id="display_area"></div> <input value="提交" type="button" id="btn" /> </body> <script> window.onload=function(){ var display_area = document.getElementById("display_area"); var btn = document.getElementById("btn"); btn.onclick = function(){ var content_val = document.getElementById("content").value; display_area.append(content_val); }; } </script> </html>
今天簡單的寫了個js的留言板,如今開始講解js代碼html
window.onload=function(){ //等到文本加載完成後再加載js代碼 var display_area = document.getElementById("display_area"); //獲取id爲display_area的節點賦值給display_area. var btn = document.getElementById("btn"); //獲取id爲btn的節點賦值給btn. btn.onclick = function(){ //點擊btn執行代碼塊裏面的代碼 var content_val = document.getElementById("content").value; //獲取id爲content節點的值賦值給content_val. display_area.append(content_val); //把content_val添加到節點display_area裏面 }; }