Question

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

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

TypeError：无法设置属性＆＃39; className＆＃39;未定义在nextSlide

当我在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; }

JS

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";
}

我相信它可能是环境问题，但我想不出任何事情。也许有人有想法。谢谢你的帮助。

Answer 1

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

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

我假设您已经完成了，将代码放入文档的body，因为您已将其输入到JSFiddle javascript编辑器中。

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

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

环境/设置 - JavaScript滑块 - ＆＃34;无法设置属性＆＃39; className＆＃39;未定义＆＃34;

1 个答案: