Why is this js loop skipped in one instance?

Question

I have a nested loop that will work most of the time, but for one specific case it doesn't start at all.

The following is the value: 1, 3-5, 7-10, 22

JS Code:

 document.getElementById("myButton").addEventListener("click", function () { document.getElementById("msg").innerHTML = ""; // Get the short list var list = document.getElementById("myIn").value; var sublists = list.split(", "); var Range = []; var result = ""; var start; // for the nested loop var end; // for the nested loop for (var i = 0; i < sublists.length; i++) { Range = sublists[i].split("-"); start = Range[0]; end = Range[Range.length-1]; Log("Range: " + Range); // Shows which parts of the sublist the program sees for (var j = start; j <= end; j++) { result = result + j + ","; Log("Result in loop: " + result); // Show which parts make it inside the loop } } result = result.slice(0, -1); // Takes off the extra comma at the end Log("Result: " + result); // Shows result }); 

When an error value is entered, this is the result:

 Range: 1 Result in loop: 1, Range: 3,5 Result in loop: 1,3, Result in loop: 1,3,4, Result in loop: 1,3,4,5, Range: 7,10 <--- Never goes inside the loop Range: 22 Result in loop: 1,3,4,5,22, Result: 1,3,4,5,22 

I can not understand why the 7-10 part is skipped. Any help or explanation is appreciated.

Here is FIDDLE

Answer 1

You need to use parseInt when working with integer here

 start = parseInt(Range[0],10); end = parseInt(Range[Range.length-1],10); 

After splittng, you get an array with strings, and when you try to compare "7" with "10", it is compared as a string, and "7" is always greater than "10" because the char code for "7" is larger than the char code for '1' (first char at "10")

You can also use the following function to convert to number: Number , parseInt or parseFloat

 document.getElementById("myButton").addEventListener("click", function() { document.getElementById("msg").innerHTML = ""; // Get the short list var list = document.getElementById("myIn").value; var sublists = list.split(", "); var Range = []; var result = ""; var start; // for the nested loop var end; // for the nested loop for (var i = 0; i < sublists.length; i++) { Range = sublists[i].split("-"); start = parseInt(Range[0], 10); end = parseInt(Range[Range.length - 1], 10); Log("Range: " + Range); // Shows which parts of the sublist the program sees for (var j = start; j <= end; j++) { result = result + j + ","; Log("Result in loop: " + result); // Show which parts make it inside the loop } } result = result.slice(0, -1); // Takes off the extra comma at the end Log("Result: " + result); // Shows result }); // Log is my imitation of console.log() function Log(stuff) { var msg = document.getElementById("msg"); var newDiv = document.createElement("div"); newDiv.innerHTML = stuff; msg.appendChild(newDiv); } 

 <p>Try this value in the input: 1, 3-5, 7-10, 22</p> <input id="myIn" type="text" /> <button id="myButton" type="button">Go</button> <p id="msg"></p> 

Answer 2

Since you are using an input text field, all values ​​from this field are strings. Then you use string manipulations that return more string values. You never deal with numbers. Therefore, Javascript will consider them as string values ​​when testing if one value is larger than the other.

The global Number object can be used to safely transfer a string value to a number. The advantage of Number over parseInt and parseFloat is that if any part of the string is not numeric, it will return NaN , while the other two will return as many lines as there are numbers before the first non-numeric character.

start = Number(Range[0]);