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>
1 answers
solution1
3 2017-01-11 07:47:41
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*/
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.