'The server responded with a status of 404 (Not Found)

I am trying to instantiate a class in one JavaScript file in another HTML file but I keep on getting this error.

Here is the code for the JavaScript file: 

class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}

And here is the code for the HTML. It should be noted that I am also using chessboard.js and chess.js and that everything is saved in the same folder.

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <base href="http://chessboardjs.com/" />
  <link rel="stylesheet" href="css/chessboard.css" />
  </head>
  <body>
  <script src="js/chess.js"></script>
  <div id="board" style="width: 400px"></div>
  <p>PGN: <span id="pgn"></span></p>
  <script src="js/json3.min.js"></script>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/chessboard.js"></script>
  <script src="class.js"></script>

    <script>
      var pgnEl = $('#pgn');

      const x = new Puzzle("test", "test");

      pgnEl.html(x.fenStart);
    </script>
  </body>
</html>

What is causing this error and how can I fix it?

javascripthtmlhttp-status-code-404


Solution 1:[1]

This could be a result from improper file locations, like @sideroxylon said, js/class.js instead of class.js.

"The HTML <base> tag is used to specify a base URI, or URL, for relative links." https://www.tutorialspoint.com/html/html_base_tag.htm This could be another reason your file is inaccessible.

It could also be from certain URL's being blocked. Try opening Developer Console (CTRL-SHIFT-I or F12) and looking for any errors on your page.

If you're loading over HTTPS any content from an HTTP source may be blocked. Here is your exact code (using online versions of each library) but with the class.js file loaded in as a regular script tag and including the starting <body> tag. https://jsfiddle.net/ckazwozg/ As you should see, it is working quite well.

Edit: For convenience, here is the raw source code from the JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
  <link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
  </head>
  <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
  <div id="board" style="width: 400px"></div>
  <p>PGN: <span id="pgn"></span></p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
  <script>
  // class.js
  class Puzzle {
    constructor(fenStart, pgnEnd) {
        this.fenStart = fenStart;
        this.pgnEnd = pgnEnd;
    }
    }
  </script>

    <script>
      var pgnEl = $('#pgn');

      const x = new Puzzle("test", "test");

      pgnEl.html(x.fenStart);
    </script>
  </body>
</html>

Solution 2:[2]

I had the same error however what I did was ensure all my files are been saved to the root folder in your case I think that's js(since all your extension points to that location) in my case I've used only the file name after giving it javascript extension (.js) e.g...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 MrM

Related Questions