将先前定义的变量传递给 Javascript 函数答案

【问题标题】：Passing previously defined variables into Javascript function将先前定义的变量传递给 Javascript 函数
【发布时间】：2016-02-28 21:16:18
【问题描述】：

我在使用 onFocus HTML 事件将参数传递到 Javascript 函数时遇到问题。我想要一种将先前定义的变量传递给函数的方法。我的 Javascript 代码目前看起来像：

<script type="text/javascript">
    var field1 = "Field 1 is selected";
    var field2 = "Field 2 is selected";

    function fieldSelect(field) {
        var message = field;
        document.getElementById("explain").innerHTML = message.toString();
    }

</script>

HTML 看起来像：

...
<input type="text" id="field1" onFocus="fieldSelect(field1)">
<input type="text" id="field2" onFocus="fieldSelect(field2)">
...
<p id="explain"></p>

因此，当您单击一个字段时，字符串变量将传递到函数中，并且段落标签会显示在表单下选择了哪个字段。

【问题讨论】：

应该可以，有什么问题？您能在控制台中看到任何错误吗？
我在浏览器中运行它，经过修改后，我设法让它输出“[object HTMLInputElement]”而不是字符串。
您的代码运行良好。检查这个演示。 JSFiddle我觉得你错过了什么。
我同意应该可以工作，这是一个可以工作的小提琴。

标签： javascript html forms function onfocus

【解决方案1】：

尽管 Darshan 为您提供了解决方法，但您的问题是另一回事。

page 中的 HTML 结构如下：

<html>
<head>
    <script type="text/javascript">
    var field1 = "Field 1 is selected";
    var field2 = "Field 2 is selected";

    function fieldSelect(field) {
        var message = field;
        document.getElementById("explain").innerHTML = message.toString();
    }
    </script>
<head>
<body>
    <form>
        <input type="text" id="field1" onFocus="fieldSelect(field1)">
        <input type="text" id="field2" onFocus="fieldSelect(field2)">
    </form>
    <p id="explain"></p>
</body>

现在，您的脚本标签被放置在head 中，您创建了两个变量，名称分别为field1 和field2。

稍后，在body 中，您创建了两个ID 为field1 和field2 的输入元素。浏览器自动创建带有 id 的变量，这些变量引用具有该 id 的元素。在head 中，您将field1 设置为"Field 1 is selected"，但是一旦您在body 中创建了ID 为field1 的输入元素，field1 的值将被覆盖，field1 指的是输入元素。

这就是为什么在您的 fieldSelect 函数中，您尝试打印字符串 "Field 1 is selected" 但最终打印输入元素 [object HTMLInputElement]

您可以做的是将您的脚本标签移动到正文元素的内部和末尾，或者如果脚本标签必须留在头部，您应该为您的输入元素或变量指定不同的名称。

【讨论】：

以更简洁的方式修复了它。我没有意识到 html id 是使用变量名存储的。干杯！

【解决方案2】：

使用 bind() 创建一个带有预先指定的初始参数的函数。

    var field1 = "Field 1 is selected";
    var field2 = "Field 2 is selected";

    function fieldSelect(field) {
        var message = field;
        document.getElementById("explain").innerHTML = message.toString();
    }

 var callback1 = fieldSelect.bind(undefined, field1);
 var callback2 = fieldSelect.bind(undefined, field2);


<input type="text" id="field1" onFocus="callback1()">
<input type="text" id="field2" onFocus="callback2()">

【讨论】：

已修复！非常感谢:)

【解决方案3】：

似乎在触发事件时，会参考该元素创建与元素 id 同名的变量。它隐藏了之前定义的同名全局变量。您仍然可以像这样从窗口范围访问全局变量：

<input type="text" id="field1" onFocus="fieldSelect(window.field1)">
<input type="text" id="field2" onFocus="fieldSelect(window.field2)">

【讨论】：