CODEWITHSUNDEEP
javascriptjqueryhtml
TheZombieCloud
TheZombieCloud

Reputation: 21

My HTML file won't link with my Javascript file

I am trying to complete an exercise for one of my courses and my HTML file won't link with my Javascript file. I put the link between my HTML file and my Javascript file in the body of my HTML file but the files still won't connect. When I test this code in Microsoft Edge, the buttons simply do not work. Anybody know what the problem is?

HTML

    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <title>HTML Page</title>
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        </head>
        <body>
            <button onclick = "startWorker()">Start Worker</button>
            <button onclick = "stopWorker()">Stop Worker</button>
            <ul id = "output">      
            </ul>
            <script type = "text/javascript" src = "/js/script.js"></script>
        </body>
    </html>

Javascript

var worker;
function startWorker(){
    worker = new Worker ("js/mod4_worker.js");
    worker.onmessage = function(event){
        document.getElementById("output").innerHTML += '<li>' + event.data + '</li>';
    };
}
function stopWorker(){
    worker.terminate();
}

Directory Structure

Files

Upvotes: 1

Views: 3051

Answers (3)

Jesse
Jesse

Reputation: 986

Permissions & File locations

(Stumbled on this Q and here's the only way I solved it...)

For me, I found it was a permissions and file location issue...

I'm running a local webserver on Ubuntu 18 Desktop, working with dev from a local folder linked to the web directory: /var/www/html/MY_DEV -> /home/me/MY_DEV. So, the www-data user couldn't actually "own" them like it needed to.

I use this setup just fine for PHP, HTML, and CSS just fine. But, if I include a javascript file via src="", no matter what I do, it doesn't work.

The only way I could get it to work on my desktop is if BOTH the served file (somefile.php or somefile.html) are physically at /var/www/html/...

And, of course accessing them at localhost/...

And, of course owning them obsessively with sudo chown -R www-data:www-data /var/www/html

Upvotes: 0

Master DJon
Master DJon

Reputation: 1965

So, I would try my comments :

  • Change the script.js path to : "../js/script.js"
  • Change the worker passed script to "../js/mod4_worker.js"

As GGG said, using a path starting with "/", a slash, use the path from root. The full path is either :

If the structure is from /webapp/ :

  • html/index.html
  • js/script.js

Accessing script.js from index.html needs to go back one folder (..) and then set the path seen here (js/script.js) which gives (../js/script.js) OR using full path (/webapp/js/script.js) which I wouldn't recommend because if you change "webapp" directory of location or URL (on WebServer)

Upvotes: 3

Eugene Fedotov
Eugene Fedotov

Reputation: 354

Remove the / from your src in the index.html. So it should be

src = "js/script.js"

Why? When you begin the src value with a /, that means you're referring to an absolute path (in other words, it starts the path from your drive's root). My devtools shows it as 

file:///C:/js/script.js

By removing the first / in your src, you're now doing relative pathing, and it will look in the correct place.

Upvotes: 0

Related Questions