使用JavaScript 制作论坛发帖页面 运用DOM和函数编写 当点击“我要发贴”按钮时显示发帖类容 单机关闭按钮时隐藏发帖内容,在发帖内容中输入标题,类容,并选择板块(板块使用下拉框显示)后,单机发布按钮,将内容添加到帖子列表
时间: 2024-03-21 16:42:29 浏览: 144
js 进行打印控制 打印时隐藏按钮
4星 · 用户满意度95%
好的,您的问题是如何使用JavaScript制作论坛发帖页面,我会给您讲解一下。
首先,在HTML页面中创建一个按钮和一个帖子列表,如下所示:
```
<button id="postBtn">我要发帖</button>
<div id="postContent" style="display:none">
<input type="text" id="postTitle" placeholder="请输入标题"><br>
<textarea id="postBody" placeholder="请输入内容"></textarea><br>
<<select id="postBoard">
<option value="board1">板块1</option>
<option value="board2">板块2</option>
<option value="board3">板块3</option>
</select><br>
<button id="submitBtn">发布</button>
<button id="closeBtn">关闭</button>
</div>
<ul id="postList"></ul>
```
然后,在JavaScript文件中编写相应的函数来实现按钮的点击事件和发布帖子的功能。具体代码如下:
```
var postBtn = document.getElementById("postBtn");
var postContent = document.getElementById("postContent");
var closeBtn = document.getElementById("closeBtn");
var submitBtn = document.getElementById("submitBtn");
var postTitle = document.getElementById("postTitle");
var postBody = document.getElementById("postBody");
var postBoard = document.getElementById("postBoard");
var postList = document.getElementById("postList");
// 点击“我要发帖”按钮显示发帖内容
postBtn.addEventListener("click", function(){
postContent.style.display = "block";
});
// 点击关闭按钮隐藏发帖内容
closeBtn.addEventListener("click", function(){
postContent.style.display = "none";
});
// 点击发布按钮添加帖子到列表
submitBtn.addEventListener("click", function(){
var title = postTitle.value;
var body = postBody.value;
var board = postBoard.value;
var li = document.createElement("li");
li.innerHTML = "<h3>" + title + "</h3><p>" + body + "</p><span>" + board + "</span>";
postList.appendChild(li);
});
```
这样,当用户点击“我要发帖”按钮时,发帖内容会显示出来,用户可以输入标题、内容和选择板块,然后点击“发布”按钮,帖子就会被添加到列表中。
当用户点击“关闭”按钮时,发帖内容会被隐藏起来。
希望这个答案能够解决您的问题。
阅读全文