<script> tag works in HTML file but not external .js file

Question

i wrote this piece of code that only works when i have the script tag in the html file after the end of the body tag. however when i cut and paste the js code in an external file named start.js, and reference it in the html inside the head tag, it doesnt work.

i tried this:

<!DOCTYPE html>
<html>
<head>
<title>Start</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="start.css">
<meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

<script src="start.js"></script>

</head>


and this:

<!DOCTYPE html>
<html>
<head>

<title>Start</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="start.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
            awesome/4.7.0/css/font-awesome.min.css">

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

</head>

dont put script tag on top of document in head, but better is to put it on bottom of body tag after all elements — curious lad
– curious lad, Commented Aug 24, 2019 at 20:44

Joseph · Accepted Answer · 2019-08-24 20:05:20Z

2

you must add your script tag at the end of your body tag or add your js code between this event

document.addEventListener('load', function(){ })

the error you get that document didn't load yet

answered Aug 24, 2019 at 20:05

Joseph

6,3273 gold badges24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tovare · Accepted Answer · 2019-08-24 20:41:15Z

0

If you have a script in head that manipulates the HTML-code you may load the script with the async attribute and inside, but you need to postpone the execution until the document has loaded as noted. When you handle your dependencies you may also use load asynchronously which will speed up initial render.

  <head>
   <script async src="start.js"></script>
  </head>

  // start.js
  document.addEventListener('DOMContentLoaded', function(event) {
    // As mentioned in the other answer, run your code here.
    mycode()
  })

However, you may as you have done just keep it in the portion just ensure that information you require is above the code. Loading code in the HTML portion is sometimes useful when doing things like small visualizations to keep things close to each other. (For more complex apps it´s probably a good idea to keep things seperated and clean).

edited Aug 24, 2019 at 20:41

answered Aug 24, 2019 at 20:16

tovare

4,1075 gold badges33 silver badges30 bronze badges

4 Comments

Rohail Bukhari Over a year ago

thank you so much. right after the src file attribute I typed async and it worked. but im also just curious as to why when i watch other peoples tutorials where they use an external js file and dont use async, the code works. is async necessary now when using html5? maybe i was watching an old tutorial

tovare Over a year ago

Hi, if it suddenly worked just by doing async there is a risk you might still have a bug. async simply means that the browser keeps loading the page and has another thread load the script in parallel. So, in this case, your page was done loading before the script was.

tovare Over a year ago

I edited my answer to make it more clear. Just do all your stuff inside a functiion and start that when the DOM is fully loaded.

Rohail Bukhari Over a year ago

i just used async attribute without using the document onload event listener and it worked but when i use the document onload event listener without using the async attribute, it doesnt work. im still confused as to why

Frazer · Accepted Answer · 2019-08-25 08:35:08Z

Hi Rohail just to add a slightly neater way of what said. Not all code needs to go into the event listener block, just the document references. As an example here's a simple Celsius/Fahrenheit converter:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Celsius Fahrenheit Converter</title>
  <script src="57641159.js"></script>
</head>
<body>
  <div>
    F: <input type="number" id="fahr" min="-459.67" step="0.01"> 
    C: <input type="number" id="cels" min="-273.15" step="0.01">
  </div>
</body>
</html>

In the javascript note that only the code relating to reading the DOM needs to be within the loaded event. This help to keep your code simple.

const round1 = x => Math.round(x * 10) / 10;

const updateC = () => {
  const c = (fahr.value - 32) * (5/9);
  cels.value = round1(c);
};

const updateF = () => {
  const f = cels.value * (9/5) + 32;
  fahr.value = round1(f);
};

const doDom = () => {
  const fahr = document.querySelector('#fahr');
  fahr.addEventListener('input', updateC);
  const cels = document.querySelector('#cels')
  cels.addEventListener('input', updateF);
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    doDom();
  });
} else {
  doDom();
}

Collectives™ on Stack Overflow

<script> tag works in HTML file but not external .js file

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related