Jquery While Loop Doesn't Work For Some Values

Question

There is a weird situation with the while loop in my jQuery code. I have a textbox and I want to split the input by ... and create an array. Then I want to put the array back into the textbox.

For example I put 1...3 and what I want is 1,2,3 in the textbox. The weird part is that the script doesn't work for some values. If I put 1...10 it works however if I try 5...10 nothing happens.

Here is my code, what am I missing? Thanks.

$(function() {
  $("#test").change(function() {
    var val = $("#test").val();
    var val2 = val.split("...");
    var arr = [];
    var valindex1 = val2[0];
    var valindex2 = val2[1];

    while (valindex1 <= valindex2) {
      arr.push(valindex1);
      valindex1++;

    }
    
    if (arr.length != 0) {
      $("#test").val(arr);
    }
  })
})

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="test" type="text">

Jamiec · Accepted Answer · 2020-10-22 13:02:41Z

The problem was simply that the values from the initial split array were strings, and the string "5" is not less than the string "10" - so your while loop immediately exists without ever creating the array of numbers.

You can fix it by ensuring valindex1 and valindex2 are numbers - the easiest way to do that is preceed the array reads with a +. See below:

$(function() {
  $("#test").change(function() {
    var val = $("#test").val();
    var val2 = val.split("...");
    var arr = [];
    var valindex1 = +val2[0];
    var valindex2 = +val2[1];

    while (valindex1 <= valindex2) {
      arr.push(valindex1);
      valindex1++;
    }
    
    if (arr.length != 0) {
      $("#test").val(arr);
    }
  })
})

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="test" type="text">

Why did it work with "1...10" Im sure you're wondering. It was somewhat luck, as javascript will quite happily evaluate "1" <= "10" which happens to be true. When you then within the loop do valindex1++; it immediately coerced the string "1" to the number 1 and incremented it. 10...20 would have similarly worked fine as would many other inputs. The fix above will work for any input.

Bhushan Kawadkar · Accepted Answer · 2020-10-22 13:04:51Z

2

after split somehow code is considering values as string instead of number, you can make use of parseInt to parse values to integer

$(function() {
  $("#test").change(function() {
    var val = $("#test").val();
    var val2 = val.split("...");

    var arr = [];
    var valindex1 = parseInt(val2[0]);
    var valindex2 = parseInt(val2[1]);

    while (valindex1 <= valindex2) {
      arr.push(valindex1);
      valindex1++;
    }
    
    if (arr.length != 0) {
      $("#test").val(arr);
    }
  })
})

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="test" type="text">

answered Oct 22, 2020 at 13:04

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Obzi · Accepted Answer · 2020-10-22 13:05:08Z

1

You need to parse you string into int :

$(function() {
  $("#test").change(function() {
    var val = $("#test").val();
    var val2 = val.split("...");
    var arr = [];
    var valindex1 = parseInt(val2[0], 10);
    var valindex2 = parseInt(val2[1], 10);

    while (valindex1 <= valindex2) {
      arr.push(valindex1);
      valindex1++;

    }
    
    if (arr.length != 0) {
      $("#test").val(arr);
    }
  })
})

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="test" type="text">

answered Oct 22, 2020 at 13:05

Obzi

2,3901 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

Jquery While Loop Doesn't Work For Some Values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related