HTML file won't find JS and CSS files

Question

My page should show a single Google Map.

If I throw the code in a JSFiddle, it works fine.

All of my files are in the same directory. I tested in Chrome and Firefox, both don't show the map. So I think there must be something about the way I am calling for access to my JavaScript and CSS.

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bob.css">
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
        <h1>My Heading</h1>

        <div id="map"></div>

        <p>My paragraph.</p>

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

bob.js

var mapOptions = {
    center: new google.maps.LatLng(37.7831,-122.4039),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

new google.maps.Map(document.getElementById('map'), mapOptions);

bob.css

html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
  margin: 0;
}

Console output

JavaScript Console

@Bamgag Filenames are case-sensitive. Did you make sure the files are all written in lowercase, just like in your code? — Jeff Noel
– Jeff Noel, Commented Jul 17, 2013 at 12:42
@JeremyGallant That is a good thought but my files are, in fact, all lower-case just as they are written in the html file. — brettgag
– brettgag, Commented Jul 17, 2013 at 12:48

Johan Bouveng · Accepted Answer · 2013-07-17 12:47:51Z

1

Perhaps the server is (mis)configured in some way so that relative paths don't work. If your files are in the root directory, then an absolute path won't hurt.

Try:

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

edited Jul 17, 2013 at 12:47

answered Jul 17, 2013 at 12:41

Johan Bouveng

5652 silver badges8 bronze badges

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

4 Comments

Jeff Noel Over a year ago

The files are in the same folder. What explanation would justify the use of /, everything should be working fine without them anyways.

Johan Bouveng Over a year ago

Did it work with /? Perhaps the server is (mis)configured in some way so that relative paths don't work. If your files are in the root directory, then an absolute path won't hurt.

Jeff Noel Over a year ago

I'm not the OP. But the explanation you just added should be a part of your answer ;-).

Johan Bouveng Over a year ago

Could you give us the url you are developing on?

Zale · Accepted Answer · 2013-07-17 12:59:27Z

0

I tested both on firefox and chrome, both work smooth. I assume you are testing this on a site so (as Johan Bouveng said ) there could be something worng, so i would try this instead:

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

./ to point to the exact same directory of the calling file ( in this case bob.html )

answered Jul 17, 2013 at 12:59

Zale

658 bronze badges

Collectives™ on Stack Overflow

HTML file won't find JS and CSS files

HTML

bob.js

bob.css

Console output

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

bob.js

bob.css

Console output

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related