Menu
I have a div that, when tapped, calls an onclick function called door(). A prompt comes up, and when the user types into the prompt, it goes away.
I made an if statement saying: if a variable (i) is greater than 3 (which happens when the user clicks the div again after typing into the prompt) then alert what the user typed in the prompt.
My problem comes when the user re-clicks the div. the alert that pops up saying the value of the prompt says "undefined" instead of what the user entered. Why?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
#mainWall{position: absolute; width: 98%; height: 98%; border: 3px solid brown; }
#door{position: absolute; left: 49%; width: 5%; height: 10px; background: green; bottom: 1%;}
#widthCorridor{position: absolute; width: 5%; height: 98%; left: 49%; background: red; bottom: 18px;}
#mainCorridor{position: absolute; width: 98%; height: 5%; left: 1%; background: red; bottom: 50%;}
</style>
</head>
<body>
<div id="mainWall"></div>
<div id="mainCorridor"></div>
<div id="widthCorridor"></div>
<div id="door" onclick="door()"></div>
<script type="text/javascript">
var i = 1;
function door() {
while (i == 1){
var door = prompt();
i++;
}
i++
if (i > 3) {
alert(door);
}
}
</script>
</body>
</html>
736
asked Mar 26 '26 12:03
Let's step through the code.
The first time you call door():
var i = 1;
was set globally, so the value of i will be 1 when door is initially called
function door() {
the variable door is actually declared here due to hoisting.
while (i == 1){
at this point, the while loop is entered, because i has a value of 1
var door = prompt();
The user can enter any value, and so long as they press "ok" a string value will be returned. If they press "cancel", null is returned.
i++;
The value of i now becomes 2
}
i++
The value of i now becomes 3
if (i > 3) {
As 3 is not greater than 3, this if block is skipped, and the function ends. The value of door which is scoped to this function is dumped for the garbage collector.
alert(door);
}
}
Now for the second time you call door()
function door() {
The variable door is declared here, again due to hoisting. Declaration brings with it a value of undefined.
while (i == 1){
i retains a value of 3 because it's in global scope, so this while loop is never entered.
var door = prompt();
i++;
}
i++
The value of i now becomes 4.
if (i > 3) {
4 is greater than 3 so the body of the if statement is entered.
alert(door);
The value of the door variable is alerted. It was never initialized, so it retains its value of undefined from declaration.
}
}
The function ends and the garbage collector collects the door variable again.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
