时间戳

首页 > 解决方案 > 每次我尝试使用 javascript 发布动态内容时显示类型错误（包含代码）

javascript - 每次我尝试使用 javascript 发布动态内容时显示类型错误（包含代码）

问题描述

const sectionCenter = document.querySelector('section-center');

window.addEventListener('DOMContentLoaded',function(){
  
  let displayMenu = menu.map(function(item){
    
    return
     `<article class="menu-item">
       <img  src=${item.img} class="photo" alt=${item.title}>
       <div class="item-info">
         <header>
         <h4>${item.title}</h4>
         <h4 class="price">$${item.price}</h4>
         </header>
         <p class="item-text">${item.desc}</p>
       </div>
     </article>  `;
  });

  displayMenu = displayMenu.join("");
  
  sectionCenter.innerHTML = displayMenu;
  
  
});

我正在尝试在主页上动态显示内容。所以这是非常基础的。一切正常，直到我读完最后几行。

错误 - “app.js:94 Uncaught TypeError: Cannot set property 'innerHTML' of null”

我多次检查代码，似乎找不到缺陷。错误一直显示。任何建议将被认真考虑。

多谢你们。

标签： javascriptpostdynamictypeerror

解决方案

如评论中所述，document.querySelector('section-center')正在寻找<section-center />. 我猜你实际上想要：

document.querySelector('.section-center') // (query by `class`) 
// or
document.querySelector('#section-center') // (query by `id`)

推荐阅读