error Cannot read property 'innerHTML' of null. (JavaScript & Firebase)

Question

I have a profile page that should show a user's information. if users wish to change the Personal information they will have to click on a button called edit Info which will redirect them to a page with a form on.

The Problem Is: I'm attempting to place the form information back onto the main Dom profile.html into the placeholders so that users can see there previous inputs entered.

But when it comes to rendering the firebase data onto the real-time listener for inserting the firebase saved data onto the profile.html, I'm getting an error Cannot read property 'innerHTML' of null.

Possible Issue: as the form information is located on "name.html" trying to target the "profile.html" is causing Cannot read property 'innerHTML' of null.

The code which I have used:

const name = document.querySelector('.switch_name');

// Render Name Data
const renderName = (data, id) => {

 const html = `
 <div>
  <a href="#" data-id="${id}">
   <div class="input-field col s12">
    <i class="material-icons prefix">account_circle</i>
    <input type="text" class="validate" value="${data.name}"/>
    <label>Full Name</label>
   </div>
  </a>
 </div> `;

// -----REPLACE HTML----
name.innerHTML += html;

};

// Savng Profile Info To Database
const profileForm = document.querySelector('.profile-form');
const submitBtn = document.querySelector('.submit');

submitBtn.addEventListener('click', (e) => {
e.preventDefault();

 const fullName = profileForm['icon_prefix'].value;

 db.collection('profile').doc().set({
  name: fullName,
 }).then(() => {
  window.location.href = "/pages/profile.html";
  console.log('data saved');
 }).catch(() => {
  console.log(error);
 });
});

// Real-Time Data
db.collection('profile').onSnapshot((snapshot) => {
 snapshot.docChanges().forEach(change => {
  if(change.type === 'added'){
   renderName(change.doc.data(), change.doc.id);
  }
  if(change.type === 'removed'){

  }
 });
});

<div class="switch_name">
        <a href="/pages/name.html">
         <div class="input-field col s12">
           <i class="material-icons prefix">account_circle</i>
           <input type="text" class="validate"/>
           <label>Full Name</label>
         </div>
        </a>
       </div>

score 2 · Answer 1 · answered Jul 19 '20 at 14:12

2

I think you're misunderstanding the use of the replace function.

The code name.replace(html, name); is finding the string html in name and then replacing occurrences of that with name. See here for how to use replace

In your case, you probably want to change that line to name.innerHTML = html;

answered Jul 19 '20 at 14:12

Dcdanny

469
2
8

Thanks that's helped a lot. how would I go about removing the old HTML template? – bossmanhoy Jul 19 '20 at 14:41
That should replace the content of the `name` element as it is. If your old HTML is in a different element try using `element.parentNode.removeChild(element)` – Dcdanny Jul 19 '20 at 14:48

error Cannot read property 'innerHTML' of null. (JavaScript & Firebase)

1 Answers1