Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

95
Views
How to use HTML file variables in external JS file

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

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. error in the console.

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?

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs