JimPanse JimPanse - 1 month ago 10
HTML Question

Why <script src=""> isn't working?

Why I cant get access to the script by src method, but when I put script inside my html file its all ok? Any ideas? I did many things like putting this script in folders etc. but now I have it in the same folder like my html site, so what's the problem? Please help me!

This is my .html file



<html lang="pl">
<head>
<title> HTML/CSS: układ strony www w oparciu o elementy HTML5. </title>
<meta charset="UTF-8">
<script src="data.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="strona">
<header class="elementy">
<img src="zdj/win95.png" alt="Win95" />
<p>Najlepszy system operacyjny świata...</p>
<div id="txt"></div>
</header>

<nav id="nav_gorny" class="elementy">
<ol>
<li class="home"><a href="index.html">Strona główna</a></li>
<li class="system"><a href="system.html">O systemie</a></li>
<li class="wymag"><a href="wymagania.html">Wymagania</a></li>
<li class="galeria"><a href="galeria.html">Galeria</a></li>
</ol>
</nav>

<nav id="nav_lewy" class="elementy">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="system.html">O systemie</a></li>
<li><a href="wymagania.html">Wymagania systemu</a></li>
<li><a href="galeria.html">Galeria zdjęć Windows95</a></li>
<li><a href="programy.html">Programy</a></li>
<li><a href="autor.html">Autor</a></li>
</ul>
</nav>


<article>
<section id="sekcja_gorna" class="elementy">
<p> Wymagania sprzętowe </p>
</section>
<section id="sekcja_dolna" class="elementy">
<p>
<table style="width:100%">
<tr>
    <th>Minimalne</th>
    <th>Zalecane</th>
  </tr>
<tr>
<td>Procesor Intel 80386DX 16 MHz</td>
<td>Procesor Intel 80486DX 16 MHz</td>
</tr>
<tr>
<td>4 MB pamięci RAM (8 MB przy OSR2 i późniejsze) </td>
<td>8 MB pamięci RAM (16 MB przy OSR2 i późniejsze)</td>
</tr>
<tr>
<td>50-55 MB wolnego miejsca na dysku</td>
<td>50-55 MB wolnego miejsca na dysku</td>
</tr>
<tr>
<td>VGA (640x480), 16 kolorów</td>
<td>SVGA (800x600), 256 kolorów</td>
</tr>
<tr>
<td>Stacja dyskietek 3½" o wysokiej gęstości</td>
<td>Stacja dyskietek i napęd CD-ROM</td>
</tr>
</table>
</p>
</section>
</article>
</br>
<aside class="elementy">
<a href="#">
<img src="zdj/auto.jpg">
</a>
<a href="#">
<img src="zdj/poz.png">
</a>
</aside>
<br />
<center> <footer class="elementy">
<p> Copyright © Maciej Śliwiński 4F &nbsp;<a href="kontakt.html"> Kontakt &nbsp;</a> <a href="autor.html"> Autor </a></p>
</footer></center>
</div>


</body>
</html>


And this is my .js file

function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
"Time: " + h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}

Answer

From your code, it doesn't look like you're calling either of your functions. If you're sure the script isn't loading, the F12 tools will help, as others have suggested in the comments.

Try calling the startTime() function at the bottom of your JavaScript file and see if it works:

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  "Time: " + h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  
  return i;
}
startTime();

Update: The error mentioned in the comment below is caused by the script executing before the txt element exists on the page. Here are two solutions:

1) Move the script to the bottom of the page.

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="data.js"></script>
  </body>
</html>

2) Don't execute the script until the page has loaded. (There are many ways to do this. Here's one:

// Instead of this at the end of your script:
startTime();
// Do this:
window.addEventListener('load', startTime, false);