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

Question

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?

wmeade · Accepted Answer · 2015-11-20 18:50:01Z

1

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

edited Nov 20, 2015 at 18:50

answered Nov 20, 2015 at 18:28

wmeade

3591 silver badge8 bronze badges

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

1 Comment

wmeade Over a year ago

Updated my answer. Try now.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related