For loop doesn't appear to work in certain ranges?
Question
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 → Fahrenheit</label> <input type="checkbox" id="celsius" onclick="checkCheckBox(this)"> <label>Fahrenheit → 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.
2 answers
solution1
2 ACCPTED 2021-02-16 14:57:39
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)
}
Updated snippet
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() { const lower = parseInt(lowerValue.value, 10); const upper = parseInt(upperValue.value, 10); createTable(lower, upper) } 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; } }
<label>Lower value</label> <input type="text" id="lower"> <label>Upper value*</label> <input type="text" id="upper"> <label>Celsius → Fahrenheit</label> <input type="checkbox" id="celsius" onclick="checkCheckBox(this)"> <label>Fahrenheit → Celsius</label> <input type="checkbox" id="fahrenheit" onclick="checkCheckBox(this)"> <button type="button" id="submit" onclick="onButtonClicked()">Convert</button>
solution2
1 2021-02-16 15:07:41
The values are received as strings in createTable function, Convert them to integers and try, it will work.
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) { lower = parseInt(lower); upper = parseInt(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 → Fahrenheit</label> <input type="checkbox" id="celsius" onclick="checkCheckBox(this)"> <label>Fahrenheit → Celsius</label> <input type="checkbox" id="fahrenheit" onclick="checkCheckBox(this)"> <button type="button" id="submit" onclick="onButtonClicked()">Convert</button> <body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.