I have an html file where I import a JS module from chessboard.js
<html lang="en"> <head> <link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" /> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script id="import" src="./chessboardFiles/js/chessboard-1.0.0.js"></script> <title></title> </head> <body> <div id="board1" style="width: 400px"></div> <script> var board2 = Chessboard("board1", "start"); </script> </body> </html>
The only problem is that I want to write what's in the body's
<script> tag in a separate JS file then add it to this html document via
<script src='...'> however the
<script id="import" ...> file that is imported is not exactly a module so I cant just do
import * as C from chessboard-1.0.0.js in a new JS file because I get a
So is there any way to get the variables available in the HTML document (i.e Chessboard()) available in an external JS file? How could I do this?
You could write to global window variables, or have everything in the window scope. Ex:
window.board = Chessboard(...), and you can access that from different files if the script is run later than the definition.