js发帖功能

最新推荐文章于 2024-07-26 11:41:15 发布

LWT20070526

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量347

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/LWT20070526/article/details/136683054

版权

本文描述了一个基于HTML、CSS和JavaScript构建的论坛帖子发布功能，包括标题输入、版块选择、内容编辑以及删除按钮的动态创建和删除。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>论坛</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>

<body>
    <div class="bbs">
        <header>
            <span onclick="add()">我要发帖</span>
        </header>
        <section id="main">
        </section>
        <div class="post" style="display: none;">
            <input class="title" placeholder="请输入标题（1-50个字符）">所属版块：
            <select id="mySelect">
                <option>请选择版块</option>
                <option>Python交流专区</option>
                <option>Java交流专区</option>
                <option>Web交流专区</option>
            </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布" onclick="create()">
            <input class="btn" value="关闭" onclick="closing()">
        </div>
    </div>
</body>
<script>
    const postelement = document.getElementsByClassName("post")[0];
    // 点击“我要发贴”
    function add() {
        var postdiv = document.getElementsByClassName("post")[0].style.display = "block";

    }
    // 点击“关闭”
    function closing() {
        var postdiv = document.getElementsByClassName("post")[0].style.display = "none";
    }
    // 点击“发布”
    function create() {
        var inputvalue = document.getElementsByClassName("title")[0].value;
        var selectElement = document.getElementById("mySelect");
        var selectedValue = selectElement.options[selectElement.selectedIndex].value;
        var textvalue = document.getElementsByClassName("content")[0].value;

        // 创建节点
        var div = document.createElement("div");
        div.setAttribute("id", "newdiv");

        var inputbutton = document.createElement("input");
        inputbutton.setAttribute("type", "button");
        inputbutton.setAttribute("value", "删除");
        //删除函数传进去个this
        inputbutton.setAttribute("onclick","del(this)")
        
        div.innerHTML = inputvalue + ' ' + selectedValue + ' ' + textvalue;
        div.appendChild(inputbutton);

        document.getElementsByClassName("bbs")[0].appendChild(div);
        
        postelement.style.display = "none";
     
    }
    //这里使用就不能直接用this
    function del(obj){
        obj.parentNode.remove();
    }

 

</script>

</html>