Question

因为我做错了，所以我发现这个代码在codepen中正常工作，正如我所说，但每当我尝试在原子或chrome中使用它时，错误就会突然出现{ {1}}标签，非常困惑。

className

    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide, 10000);

    function nextSlide() {
      slides[currentSlide].className = 'slide';
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].className = 'slide showing';
    }

/*
    essential styles:
    these make the slideshow work
        */

#slides {
  position: relative;
  height: 150px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.showing {
  opacity: 1;
  z-index: 2;
}
/*
    non-essential styles:
    just for appearance; change whatever you want
    */

.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;
}

Answer 1

这是因为CodePen，以及JSFiddle以及可能是大多数其他在线编码工具，默认情况下将JS代码包装在document.ready或{{3}中} event-handler（或将<script>放在<body>之后的其他元素之后。）

在JSFiddle上，您可以在JS面板中关闭它，但在CodePen上我还没有找到一种方法： window.load

＆＃34;的onLoad＆＃34;是window.onload
＆＃34; onDomready＆＃34;是document.ready

在您自己的服务器（或本地计算机）上，如果您的脚本是<head>中的（链接），并且您没有明确地将其包含在window.load或document.ready中，您的JS代码将在HTML元素加载到页面之前执行所以你得到错误，因为代码试图设置那些尚不存在的东西className：

未捕获的输入错误，无法设置属性＆＃34; className＆＃34;未定义的

如果您正在使用 pure / vanilla JS ，我会选择window.load，您可以从上面的链接中看到document.ready isn＆＃39;得到广泛支持。这是您使用window.load的方式：

window.onload = function() {
  /*your code*/
};

javascript程序在codepen中工作，但在我试用的任何浏览器上都没有

1 个答案: