当我尝试使用children属性和offsetWidth时，为什么我的控制台中会出现无法读取的属性消息

Question

我是编码和编程的新手，我一直在Youtube上关注一段程序员使用HTML、CSS和Javascript制作响应缩略图滑块的屏幕记录。我已经到了一个地步，我正在尝试检查我的Javascript是否登录到控制台，但我仍然收到这样的错误消息："script.js:3 Uncaught TypeError:无法在script.js:3"处读取null的属性"children"注释第3行解决了问题，但第4行显示了相同的错误："scriptjs:3 Uncaught TypeError：无法在scriptjs:4处读取属性"offsetWidth"null

有人能告诉我为什么会发生这种事吗？我的代码在下面。

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行更改为缩略图容器

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