Ik probeer een klasse in een JavaScript-bestand te instantiëren in een ander HTML-bestand, maar ik krijg steeds deze foutmelding.
Hier is de code voor het JavaScript-bestand:
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
En hier is de code voor de HTML. Opgemerkt moet worden dat ik ook chessboard.js en chess.js gebruik en dat alles in dezelfde map wordt opgeslagen.
<!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>
Wat veroorzaakt deze fout en hoe kan ik deze oplossen?
Antwoord 1
Dit kan het gevolg zijn van onjuiste bestandslocaties, zoals @sideroxylon zei, js/class.jsin plaats van class.js.
“De HTML <base>-tag wordt gebruikt om een basis-URI of URL op te geven voor relatieve links.” https://www.tutorialspoint.com/html/html_base_tag.htmDit kan zijn een andere reden waarom uw bestand niet toegankelijk is.
Het kan ook zijn dat bepaalde URL’s worden geblokkeerd. Probeer de Developer Console (CTRL-SHIFT-I of F12) te openen en zoek naar eventuele fouten op uw pagina.
Als u via HTTPS laadt, kan alle inhoud van een HTTP-bron worden geblokkeerd. Hier is uw exacte code (met behulp van online versies van elke bibliotheek), maar met het bestand class.js geladen als een normale scripttag en inclusief de beginnende <body>-tag.
https://jsfiddle.net/ckazwozg/Zoals je moetzien, is het werkt redelijk goed.
Bewerken:voor het gemak is hier de onbewerkte broncode van de 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>
Antwoord 2
Ik had dezelfde foutmelding, maar wat ik deed, zorgde ervoor dat al mijn bestanden zijn opgeslagen in de root-map in je geval, ik denk dat dat JS is (omdat al je uitbreidingspunten op die locatie) in mijn geval alleen de Bestandsnaam Na het geven van IT JavaScript Extension (.js), bijvoorbeeld.