javascript程序在codepen工作，但在任何浏览器上都没有。

So lost on what I'm doing wrong, I found this code, works fine in codepen as I said, but whenever I try to use it in atom or on chrome, errors keep popping up about the className tag, very confused.

在我做错的事情上，我发现了这个代码，在codepen中工作得很好，我说过，但是每当我尝试在atom或chrome上使用它时，错误总是出现在类名标签上，非常混乱。

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

<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>

1 个解决方案

#1

That's because CodePen, as well as JSFiddle and probably most other online coding tools, by default wrap the JS-code in a document.ready or window.load event-handler (or put the <script> inside the <body> after the other elements).

这是因为CodePen，以及JSFiddle和其他大多数在线编码工具，都默认将js代码封装在文档中。准备或窗口。加载事件处理程序(或将 <脚本> 放入中其他元素之后)。

On JSFiddle, you can turn that off in the JS-panel, but on CodePen I haven't found a way to do that:

在JSFiddle上，你可以在JS-panel中关闭它，但是在CodePen上我没有找到这样做的方法:

"onLoad" is window.onload
onLoad window
"onDomready" is document.ready
“onDomready”document.ready

On your own server (or local machine), if your script is (linked) in the <head> and you don't explicitly wrap it in either window.load or document.ready, your JS-code will be executed before the HTML elements are loaded on the page.
So you get the error, because the code is trying to set the className of something that isn't there yet:

在您自己的服务器(或本地机器)上，如果您的脚本(链接)在中，而您没有显式地将其封装到任何一个窗口中。负载或文档。准备好了，您的js代码将在HTML元素加载到页面之前执行。所以你会得到错误，因为代码试图设置一些还没有出现的类名:

uncaught typing error, can not set property "className" of undefined

未捕获的输入错误，无法设置未定义的属性“className”。

If you're using pure/vanilla JS, I would go with window.load, as you can see from the links above, document.ready isn't that widely supported. This is how you use window.load:

如果你用的是纯/香草的JS，我就用window。从上面的链接可以看到，load文件。没有得到广泛支持。这是如何使用window。load:

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

#1