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>

任何人都可以告诉我我可以做些什么来解决这个问题，并帮助解释为什么它不起作用？

Answer 1

只是为评论中给出的答案添加更多内容：

这是一个关于这个主题的长答案：Load and execution sequence of a web page?。

但是，如果我们简化，HTML的解析是同步的。在您的情况下，浏览器需要先解析HTML，然后才能通过DOM访问javascript：
var acc=document.getElementsByClassName("accordion");

这就是为什么，为了防止像你这样的错误，来自$(document).ready()的{{1}}非常有名https://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

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

HTML链接到外部JavaScript无法正常工作

2 个答案: