错误无法读取 null 的属性“innerHTML”。 （JavaScript 和 Firebase）

Question

我有一个应该显示用户信息的个人资料页面。如果用户希望更改个人信息，他们必须点击一个名为 edit Info 的按钮，该按钮会将他们重定向到带有表单的页面。

问题是：我正在尝试将表单信息放回主 Dom profile.html 的占位符中，以便用户可以看到以前输入的内容。

但是，在将 firebase 数据渲染到实时侦听器以将 firebase 保存的数据插入 profile.html 时，我收到 错误 Cannot read property 'innerHTML' of null。强>

可能的问题：由于表单信息位于“name.html”上，试图定位“profile.html”导致无法读取属性“innerHTML”为空。

我用过的代码：

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>

Answer 1

我认为你误解了替换功能的使用。

代码name.replace(html, name); 在name 中查找字符串html，然后用name 替换出现的字符串。替换方法见here

在您的情况下，您可能希望将该行更改为 name.innerHTML = html;