Question

我发现的大多数解决方案都使用本地化的javascript而不是外部文件，因此我正在发布此问题。链接到尝试的解决方案：

Turn HTML Form Input into JavaScript Variable

我想采用html形式输入，并在外部javascript文件中使用该输入。

html表单输入来自index.html

<script src="script/our.js"></script>
<div class="searchbar">
    <form action="">
        <input type="text" placeholder="search ..." name="query" onchange=formChange()>
        <button type="submit">sendit bro</button>
    </form>
</div>
<script>
    function formChange(){
        var searchThis = document.getElementsByName("query").value;
    }
</script>

然后，our.js尝试像这样使用变量：

var Manager;
(function ($) {
    $(function () {
        Manager.store.addByValue('q', searchThis);
    });
})(jQuery);

在当前设置下，如果我搜索了一个字词（“解锁”），则表单将发送，页面将显示已找到0个文档。它不会不说searchThis是未定义的我的js后端使用searchThis替换"*:*"来显示所有记录，而不是那些带有搜索字符串的记录。

编辑＃1 ：Manager.jquery.js来查看是否需要让搜索字词成为变量，而不仅仅是字符串 已删除

编辑＃2 ：我一直在尝试下面的建议。当前：

index.html已更改

<script>
    function formChange(){
        var searchThis = document.getElementsByName("query")[0].value;
        console.log(searchThis);
        window.searchThis = searchThis;
        console.log(window.searchThis);
    }
</script>

our.js已更改

    Manager.store.addByValue('q', window.searchThis);

console.log中的index.html s返回了我的搜索词。但是，如果在window.searchThis中调用our.js之前执行相同的操作，它将返回未定义的值。

编辑＃3 我一直在导入searchThis变量。我无法import window.searchThis，因为尝试时出现意外的.错误：

import searchThis from "../index.html"

它给我一个错误说明：

无法加载模块脚本：服务器回应为非JavaScript MIME类型的“文本/ html”。严格的MIME类型检查是根据HTML规范对模块脚本强制执行。

EDIT＃4 ：我的<form> + <script>部分进行了调整

<div class="searchbar">
    <form>
        <input type="text" placeholder="search Nicola..." name="query" onsubmit=formChange() >
        <button type="submit">sendit bro</button>
    </form>
</div>
<script>
    function formChange(){
        searchThis = document.getElementsByName("query")[0].value;
        term = searchThis;
        console.log(term);
    }
</script>
<script defer="defer" src="script/our.js" type="module"></script>

我已经添加了表单部分，因为我在这里也可能做错了什么。当我进入主页时，console.log上的our.js已被记录为未定义。当我使用onchange而不是onsubmit输入搜索词时，控制台会从我的<script>登录。当我点击“提交”时，页面闪烁，our.js的日志再次位于顶部且未定义。

编辑＃5 ：上述日志图片（提交前）

Answer 1

您可以使用window对象。

向searchThis对象添加名为window的新属性，并分配获得的searchThis变量的值。

function formChange() {
  var searchThis = document.getElementsByName("query")[0].value;
  window.searchThis = searchThis;
}

然后，只需使用window.searchThis进行调用：

var Manager;
(function($) {
  $(function() {
    Manager.store.addByValue('q', window.searchThis);
  });
})(jQuery);

更新：document.getElementsByName("query")返回NodeList。您可以使用 document.getElementsByName("query")[0] 来引用单个元素。

在另一个外部文件中重用的变量的可用性取决于加载或初始化的顺序。

您遇到的问题是our.js在声明window.searchThis之前正在运行。

您可以这样做：

在defer标记中添加script属性。例如：<script defer="defer" src="script/our.js"></script>。

OR

将<script src="script/our.js"></script>放在最后。

类似这样的东西：

<script>
  function formChange() {
    var searchThis = document.getElementsByName("query")[0].value;
    window.searchThis = searchThis;
  }
</script>
<script src="script/our.js"></script>

HTML表单输入到外部Javascript变量

1 个答案: