Question

我遇到了意外无限循环的问题。我刚开始使用javascript，所以我一直试图将一个简单的游戏作为练习。我一直在无限循环，我不知道为什么。我很确定它不是语法错误，因为控制台并没有告诉我任何问题。以下是发生问题的代码：

HTML：

<input id="lemonadePrice" class="buytextbox" placeholder="Lemonade price">
<input class="submit" onclick="begin();" type="submit" value="Begin!">

JavaScript的：

while (isNaN(lemonadePrice)) {
    document.getElementById("introduction").innerHTML="Uh-oh! Your lemonade price is not a
number!Please remove any words or symbols like '$'.";
    lemonadePrice = document.getElementById("lemonadePrice");
}

以下是完整代码的链接：jsfiddle

Answer 1

这可能是因为你的while()循环。可能发生的事情是，当isNAN(lemonadePrice)返回true时，while循环无限地继续，这就是你的情况下发生的情况，因为你说它无限运行。

您可以尝试使用if()。由于“lemonadePrice”的getElementById将不会返回一个数字，isNAN()将一直评估为true。 isNAN（）只是表示“不是数字”。如果你想一下，你知道这个错误的位置。

我认为你希望获得“lemonadePrice”的价值，所以你应该考虑提取其中的价值，而不仅仅是获取元素。我在你的代码中没有看到这个，但它只是这个DOM：var value = document.getElementById(id).value;

Answer 2

我认为你需要一个if而不是while

从wikipedia

获取的定义

在大多数计算机编程语言中，while循环是一个控制流程允许代码根据给定重复执行的语句布尔条件。 while循环可以被认为是重复的if 言。

这意味着while循环将在括号内的条件下重复。在这种情况下，您需要的是条件语句（if()）

如果只执行一次。虽然将重复执行，直到条件为假。在您的情况下，条件将始终为真。这就是你最终陷入无限循环的原因。

见下面的代码

if (isNaN(lemonadePrice)) {
   document.getElementById("introduction").innerHTML="Uh-oh! Your lemonade price is not a
   number!Please remove any words or symbols like '$'.";
   lemonadePrice = document.getElementById("lemonadePrice");
}

Answer 3

如果我们假设begin()基本上是这样的：

function begin(){
    var lemonadePrice = document.getElementById("lemonadePrice");
    while (isNaN(lemonadePrice)) {
        document.getElementById("introduction").innerHTML="Uh-oh! Your lemonade price is not a number!Please remove any words or symbols like '$'.";
        lemonadePrice = document.getElementById("lemonadePrice");
    }
}

然后你的循环将永远不会有机会退出，因为lemonadePrice始终设置为＆＃34;值＆＃34; lemonadePrice DOM元素;这意味着lemonadePrice将始终为NaN，因此循环是无限的。与其他人已经提到的一样，您需要使用if()语句而不是循环，并删除最后一行。您还想查看元素的值：

function begin(){
    var lemonadePrice = document.getElementById("lemonadePrice").value;
    if(isNaN(lemonadePrice)) {
        document.getElementById("introduction").innerHTML="Uh-oh! Your lemonade price is not a number!Please remove any words or symbols like '$'.";
    }
}

Answer 4

如果无效，最好使用onsubmit并阻止表单提交。最好使用正则表达式来检查它的有效浮点数。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form action="yourfile.php" method="post" onsubmit="validate();">
    <input id="lemonadePrice" class="buytextbox" placeholder="Lemonade price" /> <span id="lemonade_error"></span>
    <br>
    <input class="submit" type="submit" value="Begin!" />
</form>

<script type='text/javascript'>//<![CDATA[ 
function validate() {
    var lemonade_price = document.getElementById("lemonadePrice").value;
    if (lemonade_price.match(/\d+\.*\d*/i)){
        document.getElementById("lemonade_error").innerHTML = "Not valid.";
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false; // for IE as dont support preventDefault;
        }
        return false;
    }
    return true;
}
//]]>  
</script>
</body>
</html>

此处代码：http://jsfiddle.net/Pxuey/5/

无限循环问题？

4 个答案: