Javascript 为什么productsCenter变量的值为null？

我想知道错误是从哪里来的，我正在尝试用香草javaScript制作一个电子商务项目，当我开始显示产品时，json数据作为第一步被正确获取，但是当我执行displayProducts（）函数时，它就不起作用了

我收到的错误消息： 未捕获（承诺中）TypeError:无法将属性“innerHTML”设置为null。

我尝试了console.log（document.querySelector（“products center”）），但结果为空，我还确保js脚本标记在html标记之后

const productsCenter=document.querySelector（“产品中心”）；
类别显示产品{
异步getData（）{
试一试{
let response=wait fetch（“products.json”）；
让data=wait response.json（）；
让产品=数据项；
让mapped=products.map（（el）=>{
const{title，price}=el.fields；
const image=el.fields.image.fields.file.url；
const id=el.sys.id；
返回{标题、价格、图像、id}；
});
返回映射；
}捕捉（错误）{
控制台日志（err）；
}
}
}
类用户界面{
显示产品（产品）{
products.forEach（（产品）=>{
productsCenter.innerHTML=`
添加到包中
${product.title}
${product.price}
`;
});
}
}
window.onload=（）=>{
const product=新的Displayproducts（）；
const ui=新ui（）；
product.getData（）.then（（产品）=>{
ui.显示产品（产品）；
});
};

0
家具收藏
现在购物
你的车
我们的产品
文档查询选择器（“产品中心”）
搜索标记名为“products center”的DOM元素（类似于：
）。由于这不存在，
productsCenter
不包含任何有效的DOM，因此无法设置其
innerHTML

我可以在您的HTML中看到
，所以我猜您是想使用
const-productsCenter=document.querySelector（“.products-center”）
（注意
）。
在您的例子中
“products center”
是一个类名而不是标记名，这就是为什么会出现此错误，因为
文档.querySelector（）
如果元素不存在，则返回
null