实现一个简单的留言板功能,可以使用以下步骤:
- 创建一个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.valuehttps://www.yisu.com/ask/= ''; // 清空输入框 } }
- 将添加留言的函数绑定到表单的submit事件。
var messageForm = document.getElementById('messageForm'); messageForm.addEventListener('submit', addMessage);
现在,当用户在输入框中输入留言并点击提交按钮时,留言将会出现在留言显示区域中。