在html中存储javascript变量答案

【问题标题】：Storing javascript variable in html在html中存储javascript变量
【发布时间】：2017-07-19 22:02:06
【问题描述】：

到目前为止，在我的 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 文件的引用。当我使用标签并尝试在 html 中使用我的函数：“getWord()”时，什么也没有发生。我已经测试过了，发现 html 不喜欢“import”和“@import”这两个词。不过，我的 javascript 文件中需要这些关键字。

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

【问题讨论】：

如How to ask 中所述，您应该在问题本身中包含您的代码（而不仅仅是代码的图片）
我在问题中添加了代码！对此感到抱歉。

标签： javascript html sketchapp

【解决方案1】：

在不了解您的需求性质的情况下，您似乎可以使用这样的库来处理 @import: https://www.npmjs.com/package/grunt-import-js

在本例中，import-js 用于从 app/Resources/js/ 并扫描它们以获取 @import 指令。内容的@import 文件然后替换@import 指令。

如果我们忽略 @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 可以使用它。

【讨论】：