如何在 HTML 和 CSS 中添加外部 JavaScript

Question

这里是HTML的代码，包括JS 我希望 JS 成为一个外部文件，但它不会工作，如何解决它并使元素在外部单击时移动

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Answer 1

您需要将脚本标签放在元素之后（</body> 之前）或包装在加载处理程序中：

window.addEventListener("DOMContentLoaded", function() { 
  var acc = document.getElementsByClassName("accordion"); 
  .....
})

您还可能希望从手风琴容器中委派而不是循环

document.getElementById("accordionContainer").addEventListener("click", function(e) { 
  const tgt = e.target.closest(".accordion"); 
  if (tgt) tgt.classList.toggle("active"); 
  tgt.nextElementSibling.classList.toggle("hide", !tgt.classList.contains("active"));
})

Answer 2

如果您想在 html 文件中使用外部 JS 文件然后你必须把脚本标签放在 html 文件的头部

<head>
  <script src="file.js" defer></script>
</head>

如何在 HTML 和 CSS 中添加外部 JavaScript

how to external JavaScript in HTML and CSS

html

javascript

css

html-helper