CODEWITHSUNDEEP
javascripthtml
Rohail Bukhari
Rohail Bukhari

Reputation: 1

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

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>

Upvotes: 0

Views: 1044

Answers (3)

Frazer
Frazer

Reputation: 1089

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

Upvotes: 0

tovare
tovare

Reputation: 4087

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

Upvotes: 0

Joseph
Joseph

Reputation: 6269

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

Upvotes: 2

Related Questions