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
– Robin Zigmond, Commented Oct 1, 2018 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
– Rup, Commented Oct 1, 2018 at 14:00
if your src isn't wrong(the path is valid) then you'd have to put the script tag just before the </body> or add load event listener to the document or window. — ThS
– ThS, Commented Oct 1, 2018 at 14:04
I am getting a console error Loading failed for the <script> with source “c:\Users\PROD\Desktop\html\TabJS.js”. tabtest.html:33 — Harris Shapiro
– Harris Shapiro, Commented Oct 1, 2018 at 14:21

Abbas · Accepted Answer · 2018-10-01 14:11:33Z

1

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)?

answered Oct 1, 2018 at 14:11

Abbas

14.5k6 gold badges43 silver badges77 bronze badges

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

Comments

David White · Accepted Answer · 2018-10-02 16:32:30Z

0

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.

answered Oct 2, 2018 at 16:32

David White

6641 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript src trouble

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related