如何使新的輸入顯示在新行上而不是替換舊的輸入

我正在嘗試創建發佈系統。它有點作品，但問題是，每次用戶輸入新文本，舊文本被取代。我一直在試圖解決這個問題，但沒有多少運氣。我正在使用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(); 
}

來源

2016-12-05 user147219

要覆蓋以前的內容，而不是追加到它，因爲這條線的

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

將其更改爲

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

來源

2016-12-05 03:10:05 Dummy

如果你想在其他段落標記文本每次用戶隱藏帖子。您可以使用+=操作員添加更多段落標籤。您也不想嵌套段落標籤，所以我們可以改爲使用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(); 
}

來源

2016-12-05 03:12:39 devilfart

如何使新的輸入顯示在新行上而不是替換舊的輸入

回答

相關問題