函数中的JavaScript提示框未保存数值

Question

函数中的JavaScript提示框未保存数值

javascript

3

我有一个 div，当点击它时会调用一个名为 door() 的 onclick 函数。会出现一个提示框，用户在输入后，提示框消失。

我设置了一个 if 语句：如果一个变量 (i) 大于 3（这发生在用户在提示框中输入内容并再次单击 div 后），则弹出提示框显示用户在提示框中输入的内容。

我的问题是当用户重新单击 div 时，弹出的提示框显示 "undefined" 而不是用户输入的内容。为什么呢？

以下是代码:

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

- Aaronpd1

3个回答

0

你的提示信息已经成功保存了。但是你在 while 循环或 if 语句中存在逻辑错误。

变量 "i" 的值将始终为 2，因为当 i != 1 时，while 循环为 false。

我建议你将提示信息移到 while 循环中。以下是示例：

while (i < 4) {
             var door = prompt();
             alert(door);
             i++;
         }

或者你可以这样写：

function test() {
         var i = 1;
         var prompts = [];
         while (i < 4) {
             var door = prompt();
             prompts.push(door);
             i++;
         }

         for (var x = 0; x < prompts.length; x++)
         {
             alert(prompts[x]);
         }
     }

- Peter Andersson

0

为什么不使用简单的if else，而不是使用while，就像这样https://jsfiddle.net/g3m2jftL/。

<body>
    <div id="mainWall"></div>
    <div id="mainCorridor"></div>
    <div id="widthCorridor"></div>
    <div id="door" onclick="counter()"></div>
    <script>
        var ct = 1;
        var words;

        function counter() {
            if (ct == 1) {
                words = prompt();
                ct = ct + 1;
            } else {
                alert(words);
            }
        }
    </script>
</body>

- Adam Buchanan Smith

我的代码能够运行，但zzzzBoz的答案才是正确答案。 - Adam Buchanan Smith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

让我们逐步了解代码。

第一次调用 door()：

var i = 1;

这是全局设置的，因此当最初调用door时，i的值将为1

function door() {

变量door由于变量提升，实际上是在此处声明的。

    while (i == 1){

在这一点上，进入while循环，因为i的值为1。

        var door = prompt();

用户可以输入任何值，只要他们按下“确定”按钮，就会返回一个字符串值。如果他们按下“取消”按钮，则返回null。

        i++;

现在i的值变为2

    }
    i++

i的值现在变为3

    if (i > 3) {

由于 3 不大于 3，所以跳过了此 if 代码块，函数结束。作用域仅限于此函数的 door 的值被垃圾回收器丢弃。

        alert(door);
    }
}

第二次调用 door()。

function door() {

由于提升，变量 door 在此处被声明。声明会带来一个值为 undefined 的值。

    while (i == 1){

保留了全局作用域中的值为3，因此这个 while 循环永远不会被执行。

        var door = prompt();
        i++;
    }
    i++

现在i的值变为4。

    if (i > 3) {

4 大于 3，所以进入了 if 语句的主体。

        alert(door);

弹出door变量的值。它从未被初始化，因此保留了声明时的undefined值。

}
}

函数结束后，垃圾收集器再次收回door变量。