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="/" />
<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?
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./" />
<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?
Share edited Jan 21, 2018 at 4:58 Ludwig asked Jan 21, 2018 at 4:06 LudwigLudwig 2091 gold badge4 silver badges12 bronze badges 3-
Should the path be
js/class.js? – sideroxylon Commented Jan 21, 2018 at 4:10 - You are missing the starting <body> tag – user4616966 Commented Jan 21, 2018 at 4:21
- Changed to 'js/class.js' and added the starting body tag however no the errors still persist – Ludwig Commented Jan 21, 2018 at 4:57
2 Answers
Reset to default 0This 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./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/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./oakmac/chessboardjs/master/src/chessboard.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare./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./ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit./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>
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...
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745070512a4609515.html
评论列表（0条）