Javascript src trouble

Question

My JavaScript code will work when I put it in the HTML file within script tags. If I put the code in a separate .js file, it will not run.

Here's a dummy file I've been playing with. The code that works:

<head>
    <link rel="stylesheet" href="TabStyle.css">
</head>
<body>
<script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;

        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

</script>
<!-- Tab links -->
<div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div> 
</body>

The code that doesn't work:

<head>
    <link rel="stylesheet" href="TabStyle.css">
</head>
<body>
<script src="TabJS.js"></script> 
<!-- Tab links -->
<div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div> 
</body>

Check your filepath - that's the only reason for this not to work — Robin Zigmond, Oct 01 '18 at 14:00
Can you check your browser's developer tools please? Specifically the network tab to make sure that the script got loaded, and the console tab to see if there were any script errors raised. — Rup, Oct 01 '18 at 14:00
Depending on your browser, it could be that the DOM is not rendered yet when the code is executed... — janniks, Oct 01 '18 at 14:03
if your src isn't wrong(the path is valid) then you'd have to put the script tag just before the `
` or add load event listener to the document or window. — ThS, Oct 01 '18 at 14:04
There are no script tags in the TabJS.js file. Should there be?? Everything I've read says no — Harris Shapiro, Oct 01 '18 at 14:08
Try https://stackoverflow.com/questions/11996257/the-character-encoding-of-the-html-document-was-not-declared — j08691, Oct 01 '18 at 14:22
@HarrisShapiro that is a file path - the "path" you give to a web resource should be the URL that serves it. — Robin Zigmond, Oct 01 '18 at 14:32
Is your HTML in C:\Users\PROD\Desktop\html\tabtest.html then? (The same place as TabStyle.css?) In which case you just need `src="TabJS.js"`, not the full path. But there's no good reason the full path shouldn't still work - I think modern browsers are happy with C:\ paths as well as file:// paths. — Rup, Oct 01 '18 at 14:41

score 1 · Answer 1 · answered Oct 01 '18 at 14:11

I reproduced your example and everything works as intended. Here's a screenshot to show the files structured in the folder and the output in the browser:

You probably placed your files wrong or the reference to the code is incorrect.

Check following:

files are in the same folder
reference to JS file is as following: <script src="TabJS.js"></script>
no tags in the JS file, only pure JavaScript

Also, are you getting any errors in the Console of the browser (Developer Tools)?

score 0 · Answer 2 · answered Oct 02 '18 at 16:32

Hi there on slow days I suffer from forgetting to do all the following, maybe it's the same for you!? Make sure you are using the latest version of Chrome. Make sure you have Developer Tools on. Hover over reload and select 'Empty Cache and Hard Reload' then review what happens and in case of error, there should be a pointer in the Console to your bottom right.

Javascript src trouble

2 Answers2