在 html 中存储 javascript 变量

Question

到目前为止，在我的 javascript 中，我有以下代码： !/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;
}

我希望能够在我的 html 中使用 "word" 变量：

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>

突出显示的行是我对 javascript 文件的引用。当我使用标签并尝试使用我的函数时："getWord()" in html，没有任何反应。我已经进行了测试，发现 html 不喜欢 "import" 和“@import”这两个词。不过，我的 javascript 文件中需要这些关键字。

我的问题是当我的 javascript 文件使用@import 时如何访问它？

Answer 1

在不知道您的需求的性质的情况下，看起来您可以使用这样的库来处理 @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.

如果我们忽略 @import，您可以将其添加到 HTML 文件的顶部 <body> 标记正下方（编辑：或 <body> 标签，或者可能在 <head> 中。如果 JavaScript 用于显示或操作页面上的任何内容，则将其放在正文中）：

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

然后，您可以在 HTML:

中访问它

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

就我个人而言，我希望有人可以在这个问题后附加一个只涉及 ES6 语法和可能是 ESM 模块的答案，作为将 JavaScript 变量放入 HTML 文件或可能window 对象，因此任何客户端 JavaScript 都可以使用它。

在 html 中存储 javascript 变量

Storing javascript variable in html

javascript

html

sketchapp