SAVING & RETRIEVING FROM FIRESTORE

Question

I'm trying to send data from two forms to firebase's firestore but only one function for sending is to be working there's an error that is blocking the second function to be run. The error displaying in the console is

Uncaught TypeError: Cannot read property 'addEventListener' of null

This is my script for the first form

function post(e) {
    e.preventDefault();
    db.collection('Posts').add({
        Author_Names: postform.authornames.value,
        Description: postform.description.value,
        Info: postform.info.value,
        Citation: postform.citation.value,
       // Cover_Image: postform.cover.value,
    })
    postform.reset();
}
document.getElementById('postblog').addEventListener('click', post);/*This is where the error is displayed*/

// create element & retrieve post
function renderpost(doc){
    let li = document.createElement('li');
    let Author_Names = document.createElement('h2');
    let Description = document.createElement('h5');
    let Info = document.createElement('p');
    let Citation = document.createElement('h5');
    let Delete = document.createElement('button');
    Delete.setAttribute("class", "btn");
    let update = document.createElement('button');
    update.setAttribute("class", "btn");
    
    li.setAttribute('data-id', doc.id);
    Author_Names.textContent = doc.data().Author_Names;
    Description.textContent = doc.data().Description;
    Info.textContent = doc.data().Info;
    Citation.textContent = doc.data().Citation;
    Delete.textContent = 'Delete';
    update.textContent = 'Update';

    li.appendChild(Author_Names);
    li.appendChild(Description);
    li.appendChild(Info);
    li.appendChild(Citation);
    li.appendChild(Delete);
    li.appendChild(update);

    postlist.appendChild(li);

And this my script for the second form

const contactform = document.querySelector("#contactform");
const messagelist = document.querySelector("#messagelist");
const messageform = document.querySelector('message-form');

//Messages

//Saving new messages to firestore
function send(e){
    e.preventDefault;
    db.collection('Messages').add({
        Names: contactform.names.value,
        email: contactform.email.value,
        Message: contactform.message.value,
        Comments: contactform.comments.value,
    });
    contactform.reset();
}
document.getElementById('messagebtn').addEventListener('click', send);

// create element & render message
function rendermessages(doc){
    let li = document.createElement('li');
    let Names = document.createElement('h2');
    let email = document.createElement('h5');
    let Message = document.createElement('p');
    let Comments = document.createElement('h5');
    let Delete = document.createElement('button');
    let update = document.createElement('button');

    li.setAttribute('data-id', doc.id);
    Names.textContent = doc.data().Names;
    email.textContent = doc.data().email;
    Message.textContent = doc.data().Message;
    Comments.textContent = doc.data().Comments;
    Delete.textContent = 'Delete';
    update.textContent = 'Update';

    li.appendChild(Names);
    li.appendChild(email);
    li.appendChild(Message);
    li.appendChild(Comments);
    li.appendChild(Delete);
    li.appendChild(update);

    messagelist.appendChild(li);

I tried using an anonymous function but it was of no use, I've also triple checked my html ids, classes and names and everything matches with the ones I used on the JS.

Means it can not find the element. https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Aug 10 '20 at 14:16

score 2 · Accepted Answer · answered Aug 15 '20 at 06:22

2

I separated the functions in different files and the bugs were gone. It seems like they conflict a lot when used in one file. Also, try using the click eventListener other than the submit.

answered Aug 15 '20 at 06:22

Adadie Kashumba

66
6

score 0 · Answer 2 · answered Aug 10 '20 at 17:26

0

Error Uncaught TypeError: Cannot read property 'addEventListener' of null is due to be calling addEventListener on a not defined object.

Verify that document.getElementById('messagebtn') is well defined and that the button you are willing to listen on this function has the same ID as in the code.

Usually this kind of errors are due to a typo on either side.

answered Aug 10 '20 at 17:26

Soni Sol

2,367
3
12
23

I don't think that might be the issue on this one, I tried checking that by commenting out one function then the other one worked perfectly. Unless the functions are conflicting somehow. – Adadie Kashumba Aug 11 '20 at 10:56
If the functions are working separately but when both are declared at the same time one is broken usually is an ids issue or a scope issue. doublecheck how you are acessing the buttons on the code and that the scope is the correct one – Soni Sol Aug 13 '20 at 15:23

SAVING & RETRIEVING FROM FIRESTORE

2 Answers2