CODEWITHSUNDEEP
javascripthtml
ltw
ltw

Reputation: 285

page will not load external js file with simple code - why?

I have index.html file with code: 

<DOCUMENT!>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js\script.js"></script>
    <link rel="stylesheet" type="text/css" href="css\style.css"></link>
    <title> mchy i porosty </title>
</head>
<body>

<p id="demo"></p>

</body>
</html>

In the same folder I have folder "js" with file script.js inside. The code inside this file is:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;

for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = "text";

When I open file index.html in Firefox I see blank page. When I put code from script.js into index.html using script markup and open index.html in Firefox I see list of cars.

Can someone explain me, what did I do wrong?

Upvotes: 0

Views: 825

Answers (1)

wmeade
wmeade

Reputation: 359

Looks like you have a syntax error in your javascript path (and your css).

<script type="text/javascript" src="js\script.js"></script>
<link rel="stylesheet" type="text/css" href="css\style.css"></link>

Should be:

<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>

You also need to load or fire your function. You can do this with a simple window.onload. What you currently have will only output "text" in your html, so remove the "" from "text" in your function.

window.onload = function(){
    var cars = ["BMW", "Volvo", "Saab", "Ford"];
    var text = "";
    var i;

    for (i = 0; i < cars.length; i++) {
        text += cars[i] + "<br>";
    }

    document.getElementById("demo").innerHTML = text;
}

Alternatively, you can load your function in your body tags with <body onLoad="foo();"> and updating the function from window.onload = function() to function foo().

Upvotes: 1

Related Questions