使用 JS 以及 HTML 做一個簡易的留言版

想要比較快學習一個語言
就是先做就對了
之前都不會前端
所以跟朋友討論後想先做出一個簡易的留言版當做練習

包含了輸入留言、刪除留言以及搜尋留言

顯示的內容

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>