Javascript 为什么当我尝试对控制编号进行编码时，会收到无法读取的属性消息？

我不熟悉编码和编程，我一直在Youtube上关注一个程序员使用HTML、CSS和Javascript制作响应性缩略图滑块的屏幕记录。
我已经尝试获取要在我的页面上显示的幻灯片的控制编号，但我继续收到以下错误消息：

script.js:48未捕获类型错误：无法在script.js:51 start@script.js:48 load@script.js:23处读取属性'appendChild'，在start（script.js:48）处为null（script.js:48）@script.js:51”

有人能告诉我为什么会这样吗？我的代码如下

const controls=document.querySelector（“.controls”）；
const container=document.querySelector（“.thumbnailcontainer”）；
const allBox=container.children；
const containerWidth=container.offsetWidth；
常数裕度=30；
var项=0；
var totalItems=0；
//每张幻灯片的项目设置
响应=
[{断点：{宽度：0，项：1}}//如果宽度大于0（1将显示项）
，{断点：{宽度：600，项目：2}}//如果宽度大于600（项目将显示2）
，{断点：{宽度：1000，项目：6}//如果宽度大于1000（将显示4个项目）
] 
函数加载（）{
for（设i=0；iresponsive[i].breakPoint.width）{
items=响应[i]。断点.item
}
}
start（）；
}
函数start（）{
var totalItemsWidth=0
for（设i=0；i你有错误的类名


const controls=document.querySelector（“.controls”）；
const container=document.querySelector（“.thumbnailcontainer”）；
const allBox=container.children；
const containerWidth=container.offsetWidth；
常数裕度=30；
var项=0；
var totalItems=0；
//每张幻灯片的项目设置
响应=
[{断点：{宽度：0，项：1}}//如果宽度大于0（1将显示项）
，{断点：{宽度：600，项目：2}}//如果宽度大于600（项目将显示2）
，{断点：{宽度：1000，项目：6}//如果宽度大于1000（将显示4个项目）
] 
函数加载（）{
for（设i=0；iresponsive[i].breakPoint.width）{
items=响应[i]。断点.item
}
}
start（）；
}
函数start（）{
var totalItemsWidth=0
for（设i=0；i看起来您没有带有
class=controls
-的元素，因此
const controls=document.querySelector（“.controls”）；
将为
null
…有一个带有
artcontrols
though@JaromandaX是正确的。我已验证，如果您将选择器更改为
”。artcontrols
，您的代码将正常工作。