For loop doesn't appear to work in certain ranges?

February 16, 2021 by admin

I have this issue where running a for loop between some ranges of numbers does not work? The loop literally just does not execute, and I really can’t explain why this occurs for some number ranges, but not others. It seems that this only occurs in ranges where the upper value is < 100, and the lower is >=0. For example 20-100 does not work, yet 40-90 does. I’ve removed a lot of the code (mainly value validation things) that doesn’t need to be included, as my only real issue is as to why this loop doesn’t work.

I really don’t even know what to try, I can’t understand why calling createTable(20,100) doesn’t execute the loop, whilst createTable(40,90) does…

I should also mention that this only occurs when clicking the "convert" button.

To try this yourself, enter 20 as the lower value, 100 as the upper value, select "Celsius → Fahrenheit" and click convert.

var lowerValue = document.getElementById("lower");
var upperValue = document.getElementById("upper");
var celsiusCheckBox = document.getElementById("celsius");
var fahrenheitCheckBox = document.getElementById("fahrenheit");
var submitButton = document.getElementById("submit");




function onButtonClicked() {
   createTable(lowerValue.value, upperValue.value)
}


function createTable(lower, upper) {
    for(let i = lower; i <= upper; i++ ) {
        console.log(i);
      
    }
}

function checkCheckBox(element) {
    if (element.id == "celsius" && fahrenheitCheckBox.checked) {
        fahrenheitCheckBox.checked = false;
    } else if (element.id == "fahrenheit" && celsiusCheckBox.checked) {
        celsiusCheckBox.checked = false;
    }
}

<!DOCTYPE html>
<html lang="en">
<label>Lower value</label>
<input type="text" id="lower">
<label>Upper value*</label>
<input type="text" id="upper">

<label>Celsius &#8594; Fahrenheit</label>
<input type="checkbox" id="celsius" onclick="checkCheckBox(this)">
<label>Fahrenheit &#8594; Celsius</label>
<input type="checkbox" id="fahrenheit" onclick="checkCheckBox(this)">

<button type="button" id="submit" onclick="onButtonClicked()">Convert</button>

<body>
</body>
</html>

Any help would be greatly appreciated.

31 thoughts on “For loop doesn't appear to work in certain ranges?”

This happens because you are passing strings to the function and "100" is < than "20" since it starts with 1.

Use

function onButtonClicked() {
   const lower = parseInt(lowerValue.value, 10);
   const uppdate = parseInt(upperValue.value, 10);

   createTable(lowerValue.value, upperValue.value)
}