JavaScript實現待辦事項
- 2020 年 2 月 13 日
- 筆記
思路分析
- 按鈕綁定一個點擊事件
- 獲取用戶輸入的內容
- 創建li元素,把用戶輸入的內容添加到li標籤中
- 把創建的li元素添加到無序列表
- 清空輸入框
代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>待辦事項</title> </head> <body> <input type="text" id="id_input" /> <input type="button" value="確定" onclick="addItem()" /> <ul id="id_ul"> <li>吃飯</li> <li>睡覺</li> <li>打豆豆</li> </ul> <script type="text/javascript"> //1. 按鈕綁定一個點擊事件 function addItem() { //2. 獲取用戶輸入的內容 var inputTag = document.getElementById("id_input"); var content = inputTag.value; //3. 創建li元素,把用戶輸入的內容添加到li標籤中 // 新建一個li元素 var liTag = document.createElement("li") // 指定li標籤中的內容 liTag.innerHTML = content; //4. 把創建的li元素添加到無序列表 //獲取到ul標籤 var ulTag = document.getElementById("id_ul") // 把新建的li元素追加到ul之後 ulTag.appendChild(liTag) // 清空輸入框 inputTag.value = "" } </script> </body> </html>
效果展示
參考
- 黑馬程序員 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
一番霧語：JavaScript的小實例。
