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

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同名的变量。它隐藏了之前定义的同名全局变量。您仍然可以像这样从 window 范围访问全局变量：

<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"，但是一旦您在 body 中创建了 ID 为 field1 的输入元素，[=12 的值=] 被覆盖并且 field1 引用输入元素。

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

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

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

Passing previously defined variables into Javascript function

javascript

html

forms

function

onfocus