Question

我正在尝试创建一个发布系统。它有点有效，但问题是每次用户输入新文本时，旧文本都会被替换。我一直试图解决这个问题，但运气不好。我使用HTML5，CSS3和JavaScript的组合我使用CodePen，因此文件的骨架和链接已经为我自动编码。

HTML：

<form id="post" name="write">
<div class="textbox">
    <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="myPost">
    <button id="Post" onclick= "return write_below(this); return resetIn();" value="submit">Post</button>
</div>

</form>
    <div class="posts" id="postDisplay">
        <p><span id='display'></span></p>
    </div>

CSS：

* {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    background-color: #8ec7f9;
}

body {
    height: absolute;
    padding-top: 20%;
    padding-bottom: 20%;
    padding-left: 10%;
    padding-right: 10%;
}

#post {
    margin: auto;
}

#post .textbox {
    height: 100px;
}

#post .textbox .postwriter {
    width: 94.3%;
    height: 96%;
    background-color: hsla(0, 0%, 95%, 1);
    font-size: 140%;
}

#post .textbox #Post {
    height: 100%;
    width: 5%;
    cursor: pointer;
    background-color: #c78fff;
    border-radius: 5%;
    font-size: 20px;
}

.posts {
    height: 100px;
    font-family: Arial, sans-serif;
    font-size: 110%;
}

.posts #display{
    margin: auto;
}

JavaScript的：

function write_below(form) {
    var input = document.forms.write.post.value;
    document.getElementById('display').innerHTML = input;
    return false;
}
function resetIn(){
    document.getElementById("myPost");
    input.reset();
}

Answer 1

您正在覆盖之前的内容，而不是因为此行而附加到该内容

document.getElementById('display').innerHTML = input;

将其更改为

document.getElementById('display').innerHTML += input + "<br/>";

Answer 2

如果您希望每次用户隐藏帖子时都在另一个段落标记中添加文本。您可以使用+=操作符添加更多段落标记。您也不想嵌套段落标记，因此我们可以改为使用postDisplay元素。

function write_below(form) {
    var input = document.forms.write.post.value;
    document.getElementById('postDisplay').innerHTML += '<p>' + input + '</p>';
    return false;
}
function resetIn(){
    document.getElementById("myPost");
    input.reset();
}

如何在新行上显示新输入而不是替换旧输入

2 个答案: