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

by

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.

1 thought on “For loop doesn't appear to work in certain ranges?”

  1. 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)
}
    Reply

Leave a Comment