想要比較快學習一個語言
就是先做就對了
之前都不會前端
所以跟朋友討論後想先做出一個簡易的留言版當做練習
包含了輸入留言、刪除留言以及搜尋留言
顯示的內容
1 | <head> |
2 | <style> |
3 | </style> |
4 | </head> |
5 | |
6 | <body> |
7 | <div> |
8 | <label for="search">搜尋留言:</label> |
9 | <input type="text" id="searchText"> |
10 | <input type="button" id="searchBtn" value="搜尋"> |
11 | <input type="button" id="cancelSearchBtn" value="取消搜尋"> |
12 | </div> |
13 | <h1>留言板</h1> |
14 | <div id="newmessagePanel"> |
15 | <p>新增留言</p> |
16 | <input type="text" id="messageContent" size="40"> |
17 | <button id="messageCancelEditBtn" style="display:none;">取消編輯</button> |
18 | <input type="button" id="messageBtn" value="儲存"> |
19 | </div> |
20 | <label id="warningMessage" style="color: red;"></label> |
21 | <div> |
22 | <p>顯示留言</p> |
23 | <div id="messageListContainer"> |
24 | </div> |
25 | </div> |
26 | </body> |
javascript 的部分
1 | <script> |
2 | let messageListAll = []; |
3 | let messageDetailIndex = 0; |
4 | const messageContentInput = document.querySelector('#messageContent'); |
5 | const messageBtn = document.querySelector('#messageBtn'); |
6 | const messageListContainer = document.querySelector('#messageListContainer'); |
7 | const messageCancelEditBtn = document.querySelector('#messageCancelEditBtn'); |
8 | const searchText = document.querySelector('#searchText'); |
9 | let warnmessage = null; |
10 | |
11 | function clearShowMessageList() { |
12 | editMessageInfo = null; |
13 | messageCancelEditBtn.style.display = 'none'; |
14 | messageContentInput.value = ''; |
15 | //searchText.value=""; |
16 | |
17 | while (messageListContainer.firstChild) { |
18 | messageListContainer.removeChild(messageListContainer.firstChild); |
19 | } |
20 | } |
21 | |
22 | function renderMessageList(messageList = []) { |
23 | clearShowMessageList(); |
24 | messageList.forEach((messageInfo) => { |
25 | const content = document.createElement('span'); |
26 | content.textContent = messageInfo.content; |
27 | |
28 | const dBtnEdit = document.createElement('button'); |
29 | dBtnEdit.textContent = '編輯'; |
30 | dBtnEdit.addEventListener('click', |
31 | () => { |
32 | setEditMessageInfo(messageInfo); |
33 | }); |
34 | |
35 | const dBtnDelete = document.createElement('button'); |
36 | dBtnDelete.textContent = '刪除'; |
37 | dBtnDelete.addEventListener('click', |
38 | () => { |
39 | deleteMessage(messageInfo.id); |
40 | }) |
41 | |
42 | const message = document.createElement('div'); |
43 | message.appendChild(content); |
44 | message.appendChild(dBtnEdit); |
45 | message.appendChild(dBtnDelete); |
46 | |
47 | messageListContainer.appendChild(message); |
48 | }); |
49 | } |
50 | function init() { |
51 | searchText.value = ''; |
52 | renderMessageList(messageListAll); |
53 | |
54 | messageBtn.addEventListener('click', () => { |
55 | const contentValue = messageContentInput.value; |
56 | |
57 | setMessage(contentValue); |
58 | }) |
59 | |
60 | messageCancelEditBtn.addEventListener('click', () => { |
61 | renderMessageList(); messageListAll |
62 | }) |
63 | |
64 | document.querySelector('#searchBtn').addEventListener('click', searchmessage); |
65 | document.querySelector('#cancelSearchBtn').addEventListener('click', init); |
66 | |
67 | } |
68 | |
69 | function addMessage(value = '') { |
70 | messageListAll = [ |
71 | ...messageListAll, { |
72 | id: messageDetailIndex, |
73 | content: value, |
74 | }, |
75 | ]; |
76 | messageDetailIndex = messageDetailIndex + 1; |
77 | renderMessageList(messageListAll); |
78 | } |
79 | |
80 | function editMessage(id, value = '') { |
81 | messageListAll = messageListAll.map((messageInfo) => { |
82 | if (messageInfo.id === id) { |
83 | return { |
84 | id: id, |
85 | content: value, |
86 | }; |
87 | } |
88 | return messageInfo; |
89 | }); |
90 | renderMessageList(messageListAll); |
91 | } |
92 | |
93 | function setEditMessageInfo(messageInfo) { |
94 | editMessageInfo = messageInfo; |
95 | messageCancelEditBtn.style.display = 'table-row'; |
96 | |
97 | messageContentInput.value = editMessageInfo.content; |
98 | } |
99 | |
100 | function setMessage(value = '') { |
101 | if (editMessageInfo) { |
102 | editMessage(editMessageInfo.id, value); |
103 | } else { |
104 | addMessage(value); |
105 | } |
106 | } |
107 | function deleteMessage(id) { |
108 | messageListAll = messageListAll.filter((messageInfo) => messageInfo.id !== id); |
109 | renderMessageList(messageListAll); |
110 | } |
111 | |
112 | function searchmessage() { |
113 | const searchmessageList = messageListAll.filter((n) => n.content.indexOf(searchText.value) != -1); |
114 | if (searchmessageList.length > 0) { |
115 | clearShowMessageList(); |
116 | renderMessageList(searchmessageList); |
117 | } |
118 | } |
119 | |
120 | init(); |
121 | debugger; |
122 | </script> |