为什么我的 javascript for 循环没有做任何事情，而是冻结了我的网页？答案

【问题标题】：Why is my javascript for loop not doing anything and instead freezing up my webpage?为什么我的 javascript for 循环没有做任何事情，而是冻结了我的网页？
【发布时间】：2021-03-16 19:57:19
【问题描述】：

我无法弄清楚为什么我的代码不起作用。这是一个非常简单的程序，所以我确定我缺少或没有看到某些东西，但我似乎无法弄清楚。请帮忙！

它应该做什么：取两个数并找到下一个大于第一个数并且也能被第二个数整除的数。

发生了什么：它基本上只是冻结了我的计算机，似乎循环只是继续运行而没有停止。

JS：

function divisibleBy(first, second) {
    var firstNum = document.getElementById('firstNumber').value;
    var secondNum = document.getElementById('secondNumber').value;

    for (var i = firstNum + 1; i > firstNum; i++) {
        if (i % secondNum === 0) {
            document.getElementById('result').innerHTML = i;
        }
    }
}

HTML：

<body>
    <header>
        <h1>Let's Do Some Math!</h1>
        <h2>Type in <u>two</u> numbers and let's figure out the next <br>
            number greater than those two numbers but with a catch...<br>
            the number has to be <u>divisible</u> by the second number you choose.</h2>
    </header>
    <hr>
    <ul>
        <li>
            <label for="firstNumber">First Number:</label>
            <input type="number" id="firstNumber">
        </li>
        <li>
            <label for="secondNumber">Second Number:</label>
            <input type="number" id="secondNumber">
        </li>
        <li>
            <button type="submit" onclick="divisibleBy();">GO</button>
        </li>
    </ul>

    <h2 id="result"></h2>
    <hr>
</body>

【问题讨论】：

在您的for 循环中，您通过执行i++ 不断增加i。你告诉它在i > firstNum 时继续运行。它永远不会停止。也许您打算使用i <= secondNum？
我最终使用了一个 while 循环，我执行了 firstNum % secondNum != 0 然后递增 i，感谢您的帮助！ @blex

标签： javascript loops if-statement dom

【解决方案1】：

问题：问题是你的条件语句 for-loop总是true，导致无限循环，因此一个无响应的页面。在这种情况下也不需要为函数取参数

解决方案：

这个问题可以用数学方法解决，不用循环。

// BEST APPROCH
function divisibleBy() {
    var firstNum = parseInt(document.getElementById('firstNumber').value);
    var secondNum = parseInt(document.getElementById('secondNumber').value);
    
    var result = secondNum*parseInt(firstNum/secondNum+1);
    document.getElementById('result').innerHTML = result;
    
}

但是如果你真的需要使用循环这里是解决方案，但是请记住，在for-loop设置限制几乎与上面的解决方案相同（或设置条件为@987654323 @，因为它在遇到解决方案时已经得到了 break 语句）

// WORST APPROCH
function divisibleBy() {
    var firstNum = parseInt(document.getElementById('firstNumber').value);
    var secondNum = parseInt(document.getElementById('secondNumber').value);
    
    for (var i = firstNum+1; i <= secondNum*(firstNum/secondNum+1); i++) {
        if (i % secondNum === 0) {
            document.getElementById('result').innerHTML = i;
            break;  
        }
    }
}

但我建议使用do-While 循环，这将更能解决这个问题，并忽略在上面的代码中对i 的限制进行不必要的计算。

// BEST LOOP/SIMPLE APPROCH 
function divisibleBy() {
    var firstNum = parseInt(document.getElementById('firstNumber').value);
    var secondNum = parseInt(document.getElementById('secondNumber').value);
    
    do{
        firstNum++;
    }
    while(firstNum%secondNum != 0)
    document.getElementById('result').innerHTML = firstNum;
}

【讨论】：

【解决方案2】：

您正在使用 for (var i = firstNum + 1; i > firstNum; i++)，并且此条件将始终满足。因此它会无限循环。

试试这个：

 for (var i = firstNum + 1; ; i++) {
        if (i % secondNum === 0) {
            document.getElementById('result').innerHTML = I;
              break;
        }
    }

【讨论】：

当在firstNumber 大于2*second-number 的情况下提供输入时，此循环将无法达到功能目的例如：firstNumber = 12 和secondNumber = 4 循环甚至不会以@987654327 开头@ 将是 false。
现在，当您想到它时，它只会给出2*secondNum 的答案，并且仅在firstNum 大于secondNum 的一半的情况下。额外计算循环。
是的，那么我们可以去掉条件并使用break