how to external JavaScript in HTML and CSS

Question

here is a code of HTML including JS and I want the JS to be an external file but it wont work , how to solve it and make the element move while clicking when it external

<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>

Please visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a minimal reproducible example of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Mar 15 '22 at 15:01

score 1 · Accepted Answer · answered Mar 15 '22 at 15:05

1

if you want to use external JS file inside your html file then you have to put the script tag inside the head of the html file

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

answered Mar 15 '22 at 15:05

Alucard

58
5

score -1 · Answer 2 · answered Mar 15 '22 at 14:59

You need to put the script tags after the elements (before the </body>) or wrap in a load handler:

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

Also you likely want to delegate from the accordion container instead of looping

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"));
})

how to external JavaScript in HTML and CSS

2 Answers2