實現一個簡單的留言板功能,可以使用以下步驟:
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<div id="messageArea">
<!-- 留言顯示區域 -->
</div>
<form id="messageForm">
<textarea id="messageInput" placeholder="請輸入留言"></textarea>
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>
創建一個JavaScript文件,并將其引用到HTML文件中。
在JavaScript文件中,首先獲取留言顯示區域和留言輸入框的引用。
var messageArea = document.getElementById('messageArea');
var messageInput = document.getElementById('messageInput');
function addMessage(event) {
event.preventDefault(); // 阻止表單默認提交的行為
var message = messageInput.value;
if (message.trim() !== '') {
var messageElement = document.createElement('div');
messageElement.textContent = message;
messageArea.appendChild(messageElement);
messageInput.value = ''; // 清空輸入框
}
}
var messageForm = document.getElementById('messageForm');
messageForm.addEventListener('submit', addMessage);
現在,當用戶在輸入框中輸入留言并點擊提交按鈕時,留言將會出現在留言顯示區域中。