JavaScript变量范围

时间:2010-08-09 15:47:32

标签: javascript scope

我发现了一些关于这个主题的其他问题,但由于某种原因,他们没有解决我的“问题”

我有一个纯粹兴趣的小脚本 - 它工作得很好,但有些事情困扰着我。该脚本清除onFocus上的文本字段,如果在BLur上没有输入任何内容,则键入“Write here”。脚本如下:

<html>
<head>
    <title>JavaScript</title>
    <!--Scripts-->
    <script type="text/javascript">
    <!--

    function noValue() {    
    var _value = document.getElementById('input').value;
    if (_value == "Write here") {
    document.getElementById('input').value='';
    }
    }

    function changeValue() {
    var _value = document.getElementById('input').value;
    if (_value == "") {
        document.getElementById('input').value='Write here';
    }
    }

    function dontLeave() {
        var c_box = confirm("Do you want to leave?");
        if (c_box == true) {
            die;
        }
        else {
            history.back;
        }
    }
    //-->
    </script>
    </head>

<body onUnload="dontLeave()">
<form>
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()">
</form>
</body>

</html>

正如您所看到的,变量 _value 被使用了两次 - 在“noValue()”和“changeValue()”中。这就是我想要改变的。

我认为您可以通过不在函数fx中声明它来从函数内部访问全局变量:

var i = 1;  
function foo(){  
i++;  
return;  
}

如果调用该函数,输出将为2。但是当我在函数外部声明并初始化变量时,变量在函数内部不起作用 - 怎么样?我在这里误解了什么吗? :)

我还有另一个问题:
正如您所看到的,当您离开页面时我添加了一个确认框(我知道这很烦人,我不打算使用它,这只是一个实验)但我不知道如果客户端如何不离开页面按“取消”。我该怎么办? :)

编辑 问题的第一部分现已解决 - 谢谢!
但仍然是关于恼人的确认框的最后一部分;你有没有人知道如何阻止客户离开,可以这么说?

3 个答案:

答案 0 :(得分:1)

好吧,您可以在函数外部声明,但是您需要在每次函数调用时更新值(即每个事件)。如果你不这样做,你的事件处理程序将如何知道它是什么?

答案 1 :(得分:1)

如果你把这一行......

var _value = document.getElementById('input').value;

...在函数之外,它将在函数范围内。我认为你遇到的问题是将它放在那里会导致它在DOM准备好之前执行,因此你的'input'元素还不存在。尝试等待dom加载事件,或将该脚本放在页面的最底部(仅在</body&gt;标记内)。

答案 2 :(得分:1)

要回答您的第一个问题,初始化_value的问题可能是时间问题。通过将_value放在函数之外,将立即执行该行javascript。由于javascript位于head部分,因此将在将input元素加载到文档之前执行。在加载输入元素之后,您可以在文档的末尾放置一行javascript,例如:

<body onUnload="dontLeave()">
<form>
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()">
</form>
<script type="text/javascript">
    var _value = document.getElementById('input').value;
</script>
</body>

现在,javascript变量“_value”将被正确设置,并且可以“全局”用于所有javascript函数。