JavaScript variable scopes
I found a bunch of other questions about this topic, but for some reason they did not solve my "problem".
I have this little script I made of pure interest - and it works just fine, but something is bothering me. The script clears a text field onFocus and types "Write here" if nothing is entered onBlur. The script is as follows:
<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>
As you can see the variable _value is used twice - in "noValue()" and "changeValue()". This is what I want to change.
I thought that you could access a global variable from inside a function by not declaring it inside the function fx:
var i = 1;
function foo(){
i++;
return;
}
and the output would be 2 if you call the function. But when I declare and initialize the variable outside the function, the variable does not work from inside the functions - how come?? Have I misunderstood something here? :)
I also have another question:
As you can see I added a confirm box when you leave the page (I know this is annoying, I do not intend to use it, this is just an experiment) but I don't know how to not leave the page if the client presses "Cancel". How do I do so? :)EDIT The first part of my problem is now solved - thanks!
But theres still the last part about the annoying confirm-box; does any of you know how to stop the client from leaving, so to speak?To answer your first question, your problem with initializing _value is probably one of timing. By placing _value outside of a function, that line of javascript will be executed immediately. Since the javascript is in the head section, it will be executed before the input element has been loaded into the document. You can put that one line of javascript at the end of the document, after the input element has been loaded, such as this:
<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>
Now the javascript variable "_value" will be set properly and available to all of your javascript functions "globally".
Well, you can declare it outside the functions, but you need to update the value upon each function call (that is, each event). If you don't, then how will your event handlers know what it is?
If you put this line...
var _value = document.getElementById('input').value;
... outside of the functions, it will be in scope within the functions. I think the problem you're having though is that placing it there will cause it to be executed before the DOM is ready, and hence your 'input' element doesn't exist yet. Try either waiting for a dom load event, or place that script at the very bottom of the page (just inside the </body> tag).
加载中,请稍侯......
精彩评论