控制台中的Javascript滑块错误，无法滑动_Javascript_Jquery_Html

控制台中的Javascript滑块错误，无法滑动

javascript jquery html

控制台中的Javascript滑块错误，无法滑动,javascript,jquery,html,Javascript,Jquery,Html,页面工作正常，但滑块不会滑动到下一个图像。 JSFIDLE使其运行良好，图像也会滑动，但在localhost或任何实时网站上它都会失败 <script> var slides = document.querySelectorAll('#slides.klant'); var currentSlide = 0; var slideInterval = setInterval(nextSlide,2000); function nextSlide(){ slides[

页面工作正常，但滑块不会滑动到下一个图像。 JSFIDLE使其运行良好，图像也会滑动，但在localhost或任何实时网站上它都会失败

<script>

    var slides = document.querySelectorAll('#slides.klant');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
    slides[currentSlide].className = 'klant';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'klant showing';
}


</script>

<title>Untitled Document</title>
</head>

<body>

<div id="ads">
<ul id="slides">
    <li class="klant showing"><img src="img/first.jpg"></li>
    <li class="klant"><img src="img/second.jpg"></li>
    <li class="klant"><img src="img/third.jpg"></li>
    <li class="klant"><img src="img/fourth.jpg"></li>
    <li class="klant"><img src="img/fifth.jpg"></li>
</ul>
</div>


var slides=document.queryselectoral（“#slides.klant”）；
var currentSlide=0；
var slideInterval=setInterval（nextSlide，2000年）；
函数nextSlide（）{
幻灯片[currentSlide]。类名='klant'；
当前幻灯片=（当前幻灯片+1）%slides.length；
幻灯片[currentSlide]。类名='klant showing'；
}
无标题文件

我在

幻灯片[currentSlide]上收到一个错误“Uncaught TypeError:无法设置未定义的属性'className'是函数的一部分，但无法找出问题所在。
脚本在页面加载完成之前执行，因此querySelectorAll
返回一个空数组。将脚本复制到
的末尾，它将正常工作
在JSFIDLE上，它可以工作，因为默认情况下，脚本在加载后在那里执行。
使用来自Teemu的输入（参见下面的注释），主要问题是您的脚本在HTML之前加载。因此，这些元素在脚本运行时是未定义的。在onload
事件中包装脚本可以解决问题，并在脚本中的#幻灯片
和.klant
之间留出空间。请参见以下示例：
<script>

window.onload = function () {
   var slides = document.querySelectorAll('#slides .klant');
   var currentSlide = 0;
   var slideInterval = setInterval(nextSlide,2000);


function nextSlide(){
        slides[currentSlide].className = 'klant';
        currentSlide = (currentSlide+1)%slides.length;
        slides[currentSlide].className = 'klant showing';
    }

 }

</script>


window.onload=函数（）{
var slides=document.queryselectoral（“#slides.klant”）；
var currentSlide=0；
var slideInterval=setInterval（nextSlide，2000年）；
函数nextSlide（）{
幻灯片[currentSlide]。类名='klant'；
当前幻灯片=（当前幻灯片+1）%slides.length；
幻灯片[currentSlide]。类名='klant showing'；
}
}
请注意计时。在正文
存在之前执行头部
中的脚本。将
作为
的最后一个子项（就在关闭正文标记（
）之前）将脚本标记移动到文档结尾，在关闭正文标记之前。这很神奇，getElementsByClassName
方法如何找到甚至还没有创建的元素？它们是创建的。查看问题中的HTML它们肯定不是创建的，您是否看到HTML中的
对？脚本与
的关系如何？在HTML文档中，什么是保证在执行之前执行的？在哪里定义了幻灯片
？当它被引用时？@Teemu你还需要明白，有一个延迟。这为HTML完全加载提供了空间，slide
在激发nextSlide（）时肯定会有值。@Teemu感谢您的输入。我现在真的明白了为什么它如此神奇：）是的，我必须替换页面底部的整个脚本标签，谢谢@Teemu
Just Replace
 line var slides = document.querySelectorAll('#slides.klant');

with

    var sliderparent = document.getElementById('slides');
var slides = sliderparent.querySelectorAll('.klant');