Storing javascript variable in html

So far in my javascript, I have this code: !/Users/me/Desktop/Screen Shot 2017-07-19 at 2.15.40 PM.png

@import "MochaJSDelegate.js";
@import 'common.js';

var word = "some kind of file";
function getWord(){
    return word;
}

And I want to be able to use the "word" variable in my html over here:

enter image description here

<!doctype html>
<html>
  <head>
    <title></title>
      <link rel="stylesheet" href="style3.css">
      <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
      <script src = "../Sketch/login.js"> </script>
  </head>


  <body>



    <div>

        <div class = "title">
          Botworx Sketch Plugin
        </div>


        <div class = "input-login">
          <button onclick="displayFormContents(this.form);">Login</button>
        </div>

        <div class = "input-uploadImages">
          <button onclick="displayFormContents(this.form);">Upload Images Only</button>
        </div>
        <div class = "input-uploadGalleryData">
          <button id = "upload-gallery">Upload Gallery Data</button>
        </div>
        <div class = "input-uploadAll" >
          <button id="uploadEverything">Upload Everything</button>
        </div>
        <input type="file" id="file-chooser" />



            <div id="results"></div>

            <div id="fb-root"></div>

        <button id="upload-button">Upload to S3</button>




    </div>

<script>
  alert(getWord());
</script>

The highlighted line is my reference to the javascript file. When I use a tag and try to use my function: "getWord()" in html, nothing happens. I have tested things out and found out that html does not like the words "import" and "@import". I need these keywords in my javascript file though.

My question is how do I access my javascript file when it uses @import?

Solution

Without knowing the nature of your requirements, it looks like you could use a library like this to handle @import: https://www.npmjs.com/package/grunt-import-js

In this example, import-js is used to read all javascript files from app/Resources/js/ and scan them for @import instructions. The content of the @import files then replaces the @import instruction.

If we ignore @import, you could add this to the top of your HTML file just below the <body> tag (edit: or at the bottom of the <body> tag, or probably in the <head>. Put it inside the body if the JavaScript is used to display or manipulate anything on the page):

 <script type="text/javascript">
   var word = "some kind of file";
   function getWord(input){
     console.log(input);
   }
 </script>

Then, you can access it in your HTML:

 <div class = "input-login">
   <button onclick="getWord(word);">Login</button>
 </div>

Personally, I would prefer if someone could append this question with an answer that involves only ES6 syntax and perhaps ESM modules as a way to get JavaScript variables into an HTML file or perhaps onto the window object so any client-side JavaScript could consume it.