当我尝试使用子项 属性 和 offsetWidth 时，为什么我在控制台中收到无法读取 属性 的消息？

Question

我是编码和编程的新手，我一直在 Youtube 上关注程序员使用 HTML、CSS 和 [=28= 制作响应式缩略图滑块的屏幕录像].我已经到了我试图检查我的 Javascript 是否登录到控制台的地步，但我继续收到此错误消息： "script.js:3 Uncaught TypeError: Cannot read property 'children' of null at script.js:3" 注释行 3 解决了问题但随后相同第 4 行的错误显示："script.js:3 Uncaught TypeError: Cannot read property 'offsetWidth' null at script.js:4"

谁能告诉我为什么会这样？我的代码如下。

const container=document.querySelector(".thumbnail-container");
 const allBox=container.children;
 const containerWidth=container.offsetWidth;
 const margin=30;
 var item=0;
 
 
 // item setup per slide
 
 responsive=[
 {breakPoint:{width:0,item:1}}, //if width greater than 0 (1 will item show)
 {breakPoint:{width:600,item:2}}, //if width greater than 600 (2 will item show)
 {breakPoint:{width:1000,item:4}} //if width greater than 1000 (4 will item show)
 ]
 
 function load(){
  for(let i=0; i<responsive.length;i++){
   if(window.innerWidth>responsive[i].breakPoint.width){
    items=responsive[i].breakPoint.item
   }
  }
  start();
 }
 
 function start(){
  for(let i=0;i<allBox.length;i++){
   //width and margin setup of items
   //allBox[i].style.width=containerWidth/items;
   console.log(allBox[i])
  }
 }
 
 window.onload=load();

<div class="thumbnailslider">
   <div class="thumbnailcontainer">
    <div class="artitem">
    1
    </div>
    <div class="artitem">
    2
    </div>
    <div class="artitem">
    3
    </div>
    <div class="artitem">
    4
    </div>
    <div class="artitem">
    5
    </div>
    <div class="artitem">
    6
    </div>
    <div class="artitem">
    7
    </div>
    <div class="artitem">
    8
    </div>
   </div>
   
   <!-- Control Slides -->
   <div class="artcontrols">
    
   </div>
  </div>
  <script src="script.js"></script>
  

Answer 1

请将您拼错的这一行 thumbnailcontainer 更改为 thumbnail-container

const container=document.querySelector(".thumbnailcontainer");