CODEWITHSUNDEEP
javascriptloopsif-statementdom
karinapichardo
karinapichardo

Reputation: 97

Why is my javascript for loop not doing anything and instead freezing up my webpage?

I'm having trouble figuring out why my code won't work. It's a really simple program so I'm sure there is just something I'm missing or not seeing but I can't seem to figure it out. Please help!

What it's supposed to do: take in two numbers and find the next number that's greater than the first number AND is also divisible by the second number.

What's happening: it's basically just freezing up my computer, it seems like the loop just continues to run without stopping.

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>

Upvotes: 0

Views: 71

Answers (2)

Pooja Kushwah
Pooja Kushwah

Reputation: 187

you are using for (var i = firstNum + 1; i > firstNum; i++) and this condition will always satisfies. due to which it is going endless loop.

try this :

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

Upvotes: 0

Md Zafar Hassan
Md Zafar Hassan

Reputation: 283

Problem: The problem is condition statement of yours for-loop is always true, which results in an infinite loop, hence a non-responsive page. And also there is no need to take an argument for function in this case

Solution:

This problem can be solved mathematically, without loops.

// 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;
    
}

But if you really need to use a loop here is the solution, but keep in mind, in the for-loop setting limit is almost identical to the above solution (or set condition as i <= firstNum*secondNum, since it already got break statement when it hits solution)

// 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;  
        }
    }
}

But I recommend using the do-While loop which will be more satisfying to this problem and ignore doing the un-necessary calculations for a limit of i in the above code.

// 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;
}

Upvotes: 1

Related Questions