CODEWITHSUNDEEP
javascripthtmlcss
user147219
user147219

Reputation: 375

How to make new input display on a new line instead of replacing old input

I am attempting to create a posting system. It sorta works but the problem is that everytime the user inputs new text, the old text gets replaced. I've been trying to solve this but have not had much luck. I'm using a combination of HTML5, CSS3, and JavaScript I'm using CodePen so the skeleton and linking between files has been auto-coded for me.

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();
}

Upvotes: 2

Views: 270

Answers (2)

devilfart
devilfart

Reputation: 347

If you want the text in another paragraph tag everytime the user hid post. You can use the += opperator to add more paragraph tags. You also don't want to nest paragraph tags, so we can get the postDisplay element instead.

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();
}

Upvotes: 1

Trash Can
Trash Can

Reputation: 6814

You are overwriting the previous content instead of appending to it because of this line

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

Change it to

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

Upvotes: 2

Related Questions