利用JavaScript书写代码并用HTML格式:简易留言板
时间: 2023-08-06 15:02:54 浏览: 53
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">名字:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="button" onclick="submitMessage()">提交</button>
</form>
<div id="messageList"></div>
</body>
<script src="messageBoard.js"></script>
</html>
```
JavaScript部分:
```
let messages = [];
function submitMessage() {
let name = document.getElementById("name").value;
let message = document.getElementById("message").value;
messages.push({name: name, message: message});
displayMessages();
}
function displayMessages() {
let messageList = document.getElementById("messageList");
messageList.innerHTML = "";
for (let i = 0; i < messages.length; i++) {
let messageItem = document.createElement("div");
let name = document.createElement("h3");
let message = document.createElement("p");
name.innerText = messages[i].name;
message.innerText = messages[i].message;
messageItem.appendChild(name);
messageItem.appendChild(message);
messageList.appendChild(messageItem);
}
}
```
这份代码会创建一个简易的留言板,用户可以输入自己的名字和留言,并通过点击提交按钮将留言添加到留言列表中。每次添加留言后,留言列表将会更新。