How to save post and have your function run again without deleting your input

Admin 1
Viewed 58

I am going to try to be as accurate as possible, I am doing this create post thing, and basically, the user inputs his username and whatever he wants to say in #addPost, and it is "posted" in #mainBody. Now that this is working I want to be able to create another post without deleting my old post. I want it to simply go down.

let add = document.getElementById("addPost")
let usrInp = document.getElementById("username__input")
let pstInp = document.getElementById("post__input")
let usr = document.getElementById("username__post")
let pst = document.getElementById("post__published")
let post__body = document.getElementById("mainBody")
let post = document.getElementById("post")


function Post(){
    let pstInpStr = pstInp.value
    let usrInpStr = usrInp.value
    
    if (usrInpStr == "" || pstInpStr == ""){
        alert("Empty Field")
        return false
    } 

    usr.innerHTML = usrInp.value
    pst.innerHTML = pstInp.value
    post__body.style.border = "1px solid lightgray"
    post__body.style.borderRadius = "10px"

    if (usrInpStr.length > 0 && pstInpStr.length > 0){
        usrInp.value = ""
        pstInp.value = ""
        post.style.background = "rgb(37, 202, 31)"
        post.innerHTML = "Posted ✔️"
    }
}
    <div id="addPost">
        <div class="title">Create new post
            <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i>
        </div>
        <div class="name">
            <input type="Name__Post" placeholder="Username" id="username__input" required>
        </div>
        <div class="post">
            <textarea placeholder="What's on your mind?" id="post__input"></textarea>
        </div>
        <div>   
            <button type="submit" onclick="Post()" id="post">Post</button>
        </div>
    </div>
    <div id="mainBody">
        <div class="username">
            <span id="username__post"></span>
        </div>
        <div class="date"></div>
        <div class="post">
            <p id="post__published"></p>
        </div>
    </div>

javascript
3 Answers

You can appending the new values in an container (#myList) after each submit.

let add = document.getElementById("addPost")
let usrInp = document.getElementById("username__input")
let pstInp = document.getElementById("post__input")
let usr = document.getElementById("username__post")
let pst = document.getElementById("post__published")
let post__body = document.getElementById("mainBody")
let post = document.getElementById("post")


function Post(){
    let pstInpStr = pstInp.value
    let usrInpStr = usrInp.value
    
    if (usrInpStr == "" || pstInpStr == ""){
        alert("Empty Field")
        return false
    } 

    // usr.innerHTML = usrInp.value
    // pst.innerHTML = pstInp.value

//  this lines   
    var node = document.createElement("LI");
    var textnode = document.createTextNode(usrInp.value + ' - ');
    var textnode2 = document.createTextNode(pstInp.value);

    node.appendChild(textnode);
    node.appendChild(textnode2);
    document.getElementById("myList").appendChild(node);
    // 

    // --
    post__body.style.border = "1px solid lightgray"
    post__body.style.borderRadius = "10px"

    if (usrInpStr.length > 0 && pstInpStr.length > 0){
        usrInp.value = ""
        pstInp.value = ""
        post.style.background = "rgb(37, 202, 31)"
        post.innerHTML = "Posted ✔️"
    }
}
    <div id="addPost">
        <div class="title">Create new post
            <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i>
        </div>
        <div class="name">
            <input type="Name__Post" placeholder="Username" id="username__input" required>
        </div>
        <div class="post">
            <textarea placeholder="What's on your mind?" id="post__input"></textarea>
        </div>
        <div>   
            <button type="submit" onclick="Post()" id="post">Post</button>
        </div>
    </div>
    <div id="mainBody">
        <div class="username">
            <span id="username__post"></span>
        </div>
        <div class="date"></div>
        <div class="post">
            <p id="post__published"></p>
        </div>
    </div>
<!-- this line -->
    <ul id="myList"></ul>

user_148071110 

let add = document.getElementById("addPost")
    let usrInp = document.getElementById("username__input")
    let pstInp = document.getElementById("post__input")
    let usr = document.getElementById("username__post")
    let pst = document.getElementById("post__published")
    let post__body = document.getElementById("mainBody")
    let post = document.getElementById("post")


    function Post(){
        let pstInpStr = pstInp.value
        let usrInpStr = usrInp.value
        
        if (usrInpStr == "" || pstInpStr == ""){
            alert("Empty Field")
            return false
        } 

        // usr.innerHTML = usrInp.value
        // pst.innerHTML = pstInp.value

        let htmll = `<div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;">
          <div> <span>`+ usrInp.value +`</span> </div>
          <div class="date"></div>
          <div class="post"><p>`+ pstInp.value +`</p></div>
        </div>`;

            post__body.innerHTML += htmll;

     //   post__body.style.border = "1px solid lightgray"
    //    post__body.style.borderRadius = "10px"

        if (usrInpStr.length > 0 && pstInpStr.length > 0){
            usrInp.value = ""
            pstInp.value = ""
            post.style.background = "rgb(37, 202, 31)"
            post.innerHTML = "Posted ✔️"
        }
    }
<div id="addPost">
    <div class="title">Create new post
        <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i>
    </div>
    <div class="name">
        <input type="Name__Post" placeholder="Username" id="username__input" required>
    </div>
    <div class="post">
        <textarea placeholder="What's on your mind?" id="post__input"></textarea>
    </div>
    <div>   
        <button type="submit" onclick="Post()" id="post">Post</button>
    </div>
</div>
<div id="mainBody">

</div>

user_66721850

Here's an example of what I was getting-at in my earlier comment.

Take note of the template element. This allows very easy & readable specification of content that will be added dynamically. Rather than a bunch of document.createElemnt and someElement.appendChild calls, we simply duplicate the content of the template and then fill it out before adding to the body.

Error checking removed for brevity.

<!doctype html>
<html>
<head>
<script>
"use strict";

function byId(id){return document.getElementById(id);}

window.addEventListener('load', onLoad, false);
function onLoad(evt)
{
    byId('addPostBtn').addEventListener('click', onPostBtnClicked, false);
}

function onPostBtnClicked(evt)
{
    let userInput = byId('username__input');
    let commentInput = byId('post__input');
    
    let newNode = byId('commentTemplate').content.cloneNode(true);

    newNode.querySelector('.user').textContent = userInput.value;
    newNode.querySelector('.date').textContent = 'date posted';
    newNode.querySelector('.comment').textContent = commentInput.value;

    document.body.appendChild(newNode);
    
    userInput.value = '';
    commentInput.value = '';
}
</script>

<template id='commentTemplate'>
    <div class='userComment'>
        <div class='user'></div>
        <div class='date'></div>
        <div class='comment'></div>
    </div>
</template>

<style>
.userComment
{
    margin-bottom: 16px;
    border: solid 2px #888;
}
</style>

</head>
<body>
    <div id="addPost">
        <div class="title">Create new post</div>
        <div class="name">
            <input type="Name__Post" placeholder="Username" id="username__input" required>
        </div>
        <div class="post">
            <textarea placeholder="What's on your mind?" id="post__input"></textarea>
        </div>
        <div>   
            <button id="addPostBtn">Post Comment</button>
        </div>
    </div>
</body>
</html>
user_16309630
Related