CODEWITHSUNDEEP
javascripthtml
John Mann
John Mann

Reputation: 83

Linking to js file does not work

function refresh() {
  var currentDay = new Date();
  var breakStart = new Date(2017, 3, 21, 15, 20);
  var breakEnd = new Date(2017, 4, 1, 8, 40);
  var diff = (breakStart.getTime() - currentDay.getTime()) / 1000;
  var diff2 = (breakEnd.getTime() - currentDay.getTime()) / 1000;

  dayz = Math.floor(diff2 / 86400)
  diff2 %= 86400;
  hourz = Math.floor(diff2 / 3600)
  diff2 %= 3600;
  minutez = Math.floor(diff2 / 60)
  diff2 %= 60;
  secondz = Math.floor(diff2 / 1)
  diff2 %= 1;

  days = Math.floor(diff / 86400)
  diff %= 86400;
  hours = Math.floor(diff / 3600)
  diff %= 3600;
  minutes = Math.floor(diff / 60)
  diff %= 60;
  seconds = Math.floor(diff / 1)
  diff %= 1;


  if (days == 1) {
    document.getElementById("final").innerHTML = ("There is " + days + " day, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
  }


  if (days > 1) {
    document.getElementById("final").innerHTML = ("There are " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
  }

  if (days == 0) {
    document.getElementById("final").innerHTML = ("There are " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
  }

  if (dayz > 1 && dayz < 9) {
    document.getElementById("final").innerHTML = ("We are in break! Hooray! There are " + dayz + " days, " + hourz + " hours, " + minutez + " minutes, and " + secondz + " seconds left in spring break");
  }

}

setInterval(refresh, 1000);
   <style> @import url('https://fonts.googleapis.com/css?family=Raleway:300');
   p {
     font-family: 'Raleway', sans-serif;
     font-size: 400%;
     color: ;
   }
   
   </style>
<!DOCTYPEhtml>

<embed src="Chamelion.mp3" autostart="true" loop="true" width="2" height="0">

<center>
  <p>SPRING BREAK:</p>
</center>
<center>
  <p id="final"></p>
</center>

Hello, This program I wrote calculates the amount of time it is until spring break. I put the below line of code my html but this does not seem to work to link to my js file. On the code snippet here it works, but i'm trying to use an external script. Sorry for the big block of code. Anything helps!

Seb

EDIT: The code as it is in my editor: 

   <embed src="Chamelion.mp3" autostart="true" loop="true"
   width="2" height="0">
   </embed>

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

   <style>
   @import url('https://fonts.googleapis.com/css?family=Raleway:300');
   p{
   font-family: 'Raleway', sans-serif;
   font-size: 400%;
   color: ;
   }
   </style>
   <center><p>SPRING BREAK:</p></center>
   <center><p id="final"></p></center>
   <center><img src="bunny.jpg" width="300"></center>

Upvotes: 1

Views: 57

Answers (2)

Ousmane D.
Ousmane D.

Reputation: 56433

the problems seems to be that you've loaded the script before the targeted final exists in document object model.

place the code below as the last line of the <body> element:

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

Upvotes: 1

willicab
willicab

Reputation: 64

Place the line at the end just before the tag

...
    <script src="spring.js" type="text/javascript"></script>
  </body>
</html>

Upvotes: 1

Related Questions