环境/设置-JavaScript滑块-“无法设置未定义的属性'className'”[重复]答案

【问题标题】：Environment/Setup - JavaScript Slider - "Cannot set property 'className' of undefined" [duplicate]环境/设置-JavaScript滑块-“无法设置未定义的属性'className'”[重复]
【发布时间】：2017-07-21 12:12:46
【问题描述】：

我决定在Sitepoint tutorial 的帮助下创建一个小而简单的滑块作为我练习的一部分。

不幸的是，由于代码在他们的教程中有效，它确实返回了一个错误，我说：

TypeError：无法在 nextSlide 设置未定义的属性“className”

当我在 jsfiddle 中设置好所有东西（这里是链接 https://jsfiddle.net/9ndfhn4e/）时，一切正常。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gulp Starter Environment</title>
  <link rel="stylesheet" href="css/main.css"/>
  <script src="js/j.js"></script>
</head>
<body>
  <ul id="slides">
      <li class="slide showing">Slide 1</li>
      <li class="slide">Slide 2</li>
      <li class="slide">Slide 3</li>
      <li class="slide">Slide 4</li>
      <li class="slide">Slide 5</li>
  </ul>
</body>
</html>

CSS

* {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%; }

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

#slides {
  position: relative;
  height: 300px;
  padding: 0px;
  margin: 0px;
  list-style-type: none; }

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s; }

.showing {
  opacity: 1;
  z-index: 2; }

.slide {
  font-size: 40px;
  padding: 40px;
  box-sizing: border-box;
  background: #333;
  color: #fff; }

.slide:nth-of-type(1) {
  background: red; }

.slide:nth-of-type(2) {
  background: orange; }

.slide:nth-of-type(3) {
  background: green; }

.slide:nth-of-type(4) {
  background: blue; }

.slide:nth-of-type(5) {
  background: purple; }

var slides = document.querySelectorAll("#slides .slide");
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = "slide";
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = "slide showing";
}

我相信这可能是环境问题，但我想不出什么。也许有人有一个想法。感谢您的帮助。

【问题讨论】：

是的，有帮助，只是将脚本移到了页面底部。非常感谢！

标签： javascript html css development-environment environment

【解决方案1】：

创建 fiddle 时，javscript 加载类型的默认设置为onLoad。这会将您的脚本放在文档的开头，如下所示：

<head>
...
    <script>
        window.onload=function(){
            ...your code...
        }
    </script>
...
</head>

我假设您已经完成了，将您的代码放入文档的body，就像您在 JSFiddle javascript 编辑器中键入它一样。

问题是，DOM 尚未加载，无法找到您的 document.querySelectorAll("#slides .slide")，因为它们不存在。

您要么必须将代码附加到 onLoad 事件，要么将代码放在文档底部以确保在脚本执行之前已加载 DOM。

【讨论】：

太棒了。谢谢你的帮助。现在我明白了。放在底部。