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

Question

我是编码和编程的新手，我一直在 Youtube 上关注一个程序员使用 HTML、CSS 和 Javascript 制作响应式缩略图滑块的屏幕录像。我已经到了尝试检查我的 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");