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

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

javascript html forms function

将先前定义的变量传递到Javascript函数,javascript,html,forms,function,onfocus,Javascript,Html,Forms,Function,Onfocus,我在使用onFocus HTML事件将参数传递到Javascript函数时遇到问题。我想要一种将先前定义的变量传递到函数中的方法。我的Javascript代码目前看起来像： <script type="text/javascript"> var field1 = "Field 1 is selected"; var field2 = "Field 2 is selected"; function fieldSelect(field) { va

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


var field1=“已选择字段1”；
var field2=“已选择字段2”；
功能字段选择（字段）{
var消息=字段；
document.getElementById（“explain”）.innerHTML=message.toString（）；
}

HTML格式如下所示：

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

。。。
...

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

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

var field1=“已选择字段1”；
var field2=“已选择字段2”；
功能字段选择（字段）{
var消息=字段；
document.getElementById（“explain”）.innerHTML=message.toString（）；
}
var callback1=fieldSelect.bind（未定义，field1）；
var callback2=fieldSelect.bind（未定义，field2）；

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

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

<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>

尽管Darshan为您提供了一个解决方案，但您的问题是其他的

您的HTML结构如下所示：

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

<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>


var field1=“已选择字段1”；
var field2=“已选择字段2”；
功能字段选择（字段）{
var消息=字段；
document.getElementById（“explain”）.innerHTML=message.toString（）；
}

现在，您的脚本标记被放置在

头部

中，您创建了两个名为

field1

和

field2

的变量

稍后，在

正文

中，您将使用id

field1

和

field2

创建两个输入元素。浏览器自动创建具有id的变量，这些变量引用具有该id的元素。在

标题中，您将字段1
设置为“字段1已选中”
，但一旦您在正文中创建了具有id的输入元素字段1
，field1
的值被覆盖，field1
引用输入元素
这就是为什么在字段选择
函数中，您尝试打印字符串“字段1已选择”
，但最终打印的是输入元素[object HTMLInputElement]

您可以做的是将脚本标记移动到body元素的内部和末尾，或者如果脚本标记必须留在头部，您应该为输入元素或变量指定不同的名称。
应该可以，有什么问题吗？你能在控制台中看到任何错误吗？我正在浏览器中运行它，在对它进行修补后，我设法使它输出“[object HTMLInputElement]”，但不输出字符串。你的代码工作正常。检查这个演示。我想你遗漏了什么。我同意你应该能用，这里有一把小提琴在用。修好了！非常感谢：）这是一个更干净的方式修复它。我没有意识到html ID是使用变量名存储的。干杯