时间戳

首页 > 解决方案 > 当我尝试对控制编号进行编码时，为什么会收到无法读取属性的消息？

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

问题描述

我是编码和编程的新手，我一直在 Youtube 上关注一个程序员使用 HTML、CSS 和 Javascript 制作响应式缩略图滑块的屏幕录像。
我已经到了试图让幻灯片的控制编号显示在我的页面上的地步，但我继续收到以下错误消息：

script.js:48 未捕获的类型错误：在加载时 (script.js:23) 在 script.js:51 start @ script.js:48 load @ script 时无法读取 null 的属性“appendChild” .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 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="artcontrols">

  </div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

你有错误的类名

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>

推荐阅读