Ytukyg

UPDATED CODE

So this is making me crazy...I am creating a blog app (Vanilla Js + Firebase).

• onDeleteButton deletes a single blog post. It deletes both front end
  and backend. no error.




• onEditButton edits a single blog post. It works fine as well.



• When I first edit a post and after that delete the same post, it deletes from both back and and front end, seemingly works fine BUT in console log throws me and error:
  Uncaught TypeError: Cannot read property 'title' of null.
  The error message points at the storeTitle.value = editPost.title; line in onEditButton function.

Why does onEditButton function gets called after deleting a post, but only once it has been edited once?

function onDeleteButton(event) {

    event.preventDefault();

    let id = event.target.parentElement.getAttribute('id');

    let deletePost = document.getElementById(id);

    firebase.database().ref('posts/' + id).remove();

    deletePost.parentNode.removeChild(deletePost);

}



function onEditButton(event) {

    event.preventDefault();

    let editButton = document.getElementById('edit');

    editButton.removeAttribute("hidden");

    let id = event.target.parentElement.getAttribute('id');

    let posts = firebase.database().ref('posts/' + id);

    let storeTitle = document.getElementById('blog-title');

    let storeContent = document.getElementById('blog-content');

    localStorage.setItem("postID", id);

    document.getElementById("blog-id-storage").innerHTML = localStorage.getItem("postID");

    posts.on('value', function(snapshot) {

    let editPost = snapshot.val();

    storeTitle.value = editPost.title;

    storeContent.value = editPost.content;

    });

}





function enterEditingMode() {

    if (document.getElementById('editing-mode-button').innerHTML === "Exit editing mode") {

        exitEditingMode();

    }

    else {



        ...

            addDeleteButton.addEventListener("click", this.onDeleteButton); 

            addEditButton.addEventListener("click", this.onEditButton);



            })

    }



}

html:

<button id="editing-mode-button" onclick="enterEditingMode()" class="btn btn-outline-primary">Editing mode</button>

Just in case someone has the same issue in the future, here is the solution.
On the editbutton function I used posts.on('value', function(snapshot) {...} so everytime I run this function once it was listening for changes, the code block in {} was running every time...So instead of posts.on, I had to use posts.once('value', function(snapshot) {...}. .once() without listening for changes

From firebase doc:

Listen for value events
To read data at a path and listen for changes, use the on() or once() methods of firebase.database. Reference to observe events.