javascript - 覆盖 style.display 属性时无法获取未定义或 null 引用的 'style'

Question

<script language="javascript">
 var slideIndex = 0;
 showSlides();

 function plusSlides(n) {
  showSlides(slideIndex += n);
 }

 function currentSlide(n) {
  showSlides(slideIndex = n);
 }

 function showSlides() {
    var i;
    //var slides = document.getElementsByClassName("mySlides");
    var slides = document.getElementsByClassName("col", "div", document.getElementById("mySlides"));
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
       slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
 }
</script>

我已经在 HTML 中编写了这个 javascript，并且它可以正常工作。但是当我将它作为 hta 文件运行时，

it throws error "Unable to get 'style' of undefined or null reference when overwriting style.display property" at line

"slides[slideIndex-1].style.display = "block";"

但它并没有在该行抛出错误

slides[i].style.display = "none";

Answer 1

我在这里看到了一些有趣的事情:

1) 看起来您正在将应用程序逻辑 (HTML) 与行为逻辑 (JavaScript) 混合在一起。您应该考虑将此 JS 代码放入文件中并使用 <script type="text/javascript" src="filename.js"></script> 调用它直接放置在 </body> 上方标签。这将在页面加载后运行代码，因此元素将在脚本运行之前呈现。如果您当前的脚本位于使用 id=mySlides 渲染元素的代码之上，它可能返回未定义。这样做将使您的代码更加模块化并且更易于阅读和维护。

2) 我以前从未见过这种语法:document.getElementsByClassName("col", "div", document.getElementById("mySlides")); 。我认为这非常可疑，因为我在以下位置没有看到任何提及:https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName 。我建议在那里重构您的代码。将其更改为 document.querySelectorAll('.col, .div, #mySlides') (假设您有一个名为 div 的类。如果您尝试查找所有 <div> 标签，请删除句点。

3) 如果您看到未定义，slides.length 可能为 0，在我看来，这可能与您的 getElementById 用法有关。尝试将其添加到 var slides = 的正下方部分:console.log("Number of elements found: " + slides.length);