404 error loading a .js file from html script

Question

I'm new in using javascript and html.

I've been following a tutorial that involves loading files from the Paperjs code library. I'm trying to load a js file that contains functions and objects for placing images on web pages.

Whenever I attempt to load the "paper-full.js" file, I get a 404 error in the Console, despite the "paper-full.js" file being in the same location as the "index.html" file that's calling for it. The preview page also has the localhost IP address as the page's title, rather than the file name.

The goal for this part of the tutorial is just to place an image at [0,0] on the preview page.

Any ideas on where the mistake could be will be greatly appreciated.

folder containing the paper-full and index files

preview page error for index.html

Here is the index.html file

  <!DOCTYPE html>
<html>
    <head>
        <!-- Imports the Paper.js library -->
        <script type="text/javascript" src="js/paper-full.js">
        </script>

        <!-- Connects Paper.js with the HTML canvas -->
        <script type="text/paperscript" src="js/rocket.js" canvas="canvas"></script>        
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
</html>

You're trying to load `js/paper-full.js`. That should be `paper-full.js`. As for the title, you can set it using a `` tag in the `` section. — Robby Cornelissen, Jun 06 '18 at 03:50
Related: https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls — faintsignal, Jun 06 '18 at 03:54

score 4 · Accepted Answer · answered Jun 06 '18 at 03:52

Looking at your project structure you have your paper-full.js and rocket.js files alongside your index.html file, but you are looking for them inside a /js/ folder that doesn't exist.

Try this, noting how I have changed js/etc to ./etc, meaning it will look for it's neighboring file.

<!DOCTYPE html>
<html>
    <head>
        <!-- Imports the Paper.js library -->
        <script type="text/javascript" src="./paper-full.js">
        </script>

        <!-- Connects Paper.js with the HTML canvas -->
        <script type="text/paperscript" src="./rocket.js" canvas="canvas"></script>        
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
</html>

Thanks, glad this was a simple mistake, now I've got a better idea for how to navigate to files in js — Artist code, Jun 06 '18 at 04:16
@Artistcode Please accept the answer if you got your solution ! — Biswajit Roy, Jun 06 '18 at 04:49

404 error loading a .js file from html script

1 Answers1