HTML链接到外部JavaScript不起作用。

Question

我基本上是按照W3School的这个例子实现的: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

我尝试将JavaScript代码制作为一个名为accordion.js的单独文件。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

我尝试通过HTML调用JavaScript文件，做法如下：

<script type="text/javascript" src="accordion.js"></script>

有人能告诉我如何修复这个问题，并帮忙解释为什么它不起作用吗？

- TBA

---

JS文件是否与HTML文件在同一目录下？ - Steveo

将你的脚本添加到body结束标签之前或者添加window.addEventListener('load', function(){})。 - Maciej Kozieja

脚本标签是否在元素“accordion”之后的主体中？ - Rico Kahler

你的控制台里有任何错误吗？ - Kevin Amiranoff

现在可以工作了，谢谢大家的建议 :) - TBA

Answer 1

仅补充一下评论中给出的答案：

这里有一个关于此主题的长篇回答：网页的加载和执行顺序？。

但是，如果我们简化一下，HTML的解析是同步进行的。浏览器需要在访问javascript之前解析HTML，例如您的情况：
var acc=document.getElementsByClassName("accordion");

那就是为什么，并且为了防止像您遇到的错误，jQuery中的$(document).ready()非常著名。https://learn.jquery.com/using-jquery-core/document-ready/

- Kevin Amiranoff

Answer 2

根据您可能遇到的错误，看起来很可能是JS文件不在同一目录中。

- mysticalstick