Question

我在使用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>

因此，当您单击一个字段时，字符串变量将传递给函数，而段落标记将显示在表单下选择的字段。

Answer 1

使用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()">

Answer 2

似乎触发事件时，将引用该元素创建与元素id同名的变量。它隐藏了具有之前定义的相同名称的全局变量。您仍然可以从窗口范围访问全局变量，如下所示：

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

Answer 3

尽管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"，但是在field1中创建了ID为body的输入元素后，{{1}的值被覆盖，field1引用输入元素。

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

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

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

3 个答案: