javascript program works in codepen, but not on any browser I try it on

Question

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.

    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>

codepen runs in a browser ... I don't understand the question — Jaromanda X, Jan 11 '17 at 02:56
uncaught typing error, can not set property "className" of undefined in google — db3, Jan 11 '17 at 02:57
the program runs in codepen, but fails to run when i open it from a html file. — db3, Jan 11 '17 at 02:57
The code 'technically' is right. Just make sure you are loading the JS after the HTML is loaded so that JS can find the classes it refers to. As mentioned earlier, codepen runs in the browser so the question makes no sense, you are just not loading/calling things in the right way as does codepen. Good luck — Ruslan Abuzant, Jan 11 '17 at 03:08

score 4 · Answer 1 · edited May 23 '17 at 12:24

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

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

"onLoad" is window.onload
"onDomready" is 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:

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

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:

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

javascript program works in codepen, but not on any browser I try it on

1 Answers1