HTML link to external javascript not working

Question

I was basically implementing this from W3School: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

I tried making the javascript into a separate file called 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";
    } 
  }
}

and tried calling the javascript file via HTML doing this:

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

Can anyone tell me what I can do to fix this and help explain why it didn't work?

Add your script just before end of body or add `window.addEventListener('load', function(){})` — Maciej Kozieja, Feb 21 '17 at 21:52
Is the script tag in the body *after* the element `accordion`? — Rico Kahler, Feb 21 '17 at 21:52
Possible duplicate of [Load and execution sequence of a web page?](http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page) — Heretic Monkey, Feb 21 '17 at 23:31

score 2 · Answer 1 · edited May 23 '17 at 12:02

Just to add a little more to the answer given in the comments :

Here is a long answer on the subject : Load and execution sequence of a web page?.

But, if we simplify, the parsing of the HTML is synchronous. The browser needs to parse the HTML before he can access the DOM via javascript, in your case:
var acc=document.getElementsByClassName("accordion");

That is why, and to prevent bugs like you had, that $(document).ready() from jQuery is very famous https://learn.jquery.com/using-jquery-core/document-ready/

score 1 · Answer 2 · answered Feb 21 '17 at 21:55

1

Depending on what errors you might be getting it sounds like it's likely the JS file isn't in the same directory.

answered Feb 21 '17 at 21:55

mysticalstick

2,479
5
16
21

HTML link to external javascript not working

2 Answers2