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

Question

我是编码和编程新手，我已经尝试获取要在页面上显示的幻灯片的控制编号，但我仍然收到此错误消息：script.js：48未捕获类型错误：无法在加载（script.js：23）时在开始（script.js：48）时读取null的属性'appendChild'在script.js：51开始@ script.js：48加载@脚本.js:23（匿名）@ script.js:51"有人能告诉我为什么会发生这种情况吗？我的代码如下。const controls = document.querySelector(".controls");const container = document.querySelector(".thumbnailcontainer");const allBox = container.children;const containerWidth = container.offsetWidth;const margin = 30;var item = 0;var totalItems = 0;// item setup per slideresponsive =   [ { 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: 6 }} // 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() {  var totalItemsWidth = 0  for (let i = 0; i < allBox.length; i++) {    //width and margin setup of items    allBox[i].style.width = (containerWidth / items) - margin + "px";    allBox[i].style.margin = (margin / 2) + "px";    totalItemsWidth += containerWidth / items;    totalItems++;  }  //tumbnail-container width set up  container.style.width = totalItemsWidth + "px";  //slides controls number set up  const allSlides = Math.ceil(totalItems / items);  const ul = document.createElement("ul");  for (let i = 1; i <= allSlides; i++) {    const li = document.createElement("li");    li.id = i;    li.innerHTML = i;    li.setAttribute("onclick", "controlSlides(this)");    ul.appendChild(li);  }  controls.appendChild(ul);}window.onload = load();

Answer 1

你的班级名称错误

const controls = document.querySelector(".controls");

   

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

const allBox = container.children;

const containerWidth = container.offsetWidth;

const margin = 30;

var item = 0;

var totalItems = 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: 6 }} // 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() {

  var totalItemsWidth = 0

  for (let i = 0; i < allBox.length; i++) {

    //width and margin setup of items

    allBox[i].style.width = (containerWidth / items) - margin + "px";

    allBox[i].style.margin = (margin / 2) + "px";

    totalItemsWidth += containerWidth / items;

    totalItems++;

  }

  //tumbnail-container width set up

  container.style.width = totalItemsWidth + "px";

  //slides controls number set up

  const allSlides = Math.ceil(totalItems / items);

  const ul = document.createElement("ul");

  for (let i = 1; i <= allSlides; i++) {

    const li = document.createElement("li");

    li.id = i;

    li.innerHTML = i;

    li.setAttribute("onclick", "controlSlides(this)");

    ul.appendChild(li);

  }

 controls.appendChild(ul);

}

window.onload = load();

* {

  box-sizing: border-box;

}

.thumbnailslider {

  width: 100%;

  float: left;

  overflow: hidden;

}

.thumbanilslider .thumbnailcontainer {

  width: 100%;

  float: left;

}

.thumbnailslider .artitem {

  height: 175px;

  background-color: grey;

  line-height: 175px;

  text-align: center;

  font-size: 50px;

  color: #ffffff;

  float: left;

}

<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 class="artitem">  9 </div>

    <div class="artitem"> 10 </div>

  </div>

  <!-- Control Slides -->

  <div class="controls">

  </div>

</div>