Array sorting works fine with single digits, but not multiple digit values

Question

I'm trying to write a script that uses the bubble sort method to take an array and order it by values.
It works fine with single digits, but fails to work once I enter any inputs that are non-single digit.

<!DOCTYPE html>
<html>
<body>

<p> Click the button to enter and display an array of numbers! </p>
<button onclick="sortFunction()">Click Me</button>

<script>
function sortFunction()
{
var totalNums = prompt("How many numbers would you like to enter?","");
var numsArray = [];

  for(i=0; i<totalNums; ++i)
  {
      if(nums != "x")
      {
        var nums = prompt("Please enter number " ,"");
        numsArray[i] = nums;
        document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray;

      }
  }

var length = numsArray.length;
var swapped;

  do
  {
  swapped = false;
      for (var j=0; j < length-1; j++)
      {
          if (numsArray[j] > numsArray[j+1])
          {
          var temp = numsArray[j];
          numsArray[j] = numsArray[j+1];
          numsArray[j+1] = temp;
          swapped = true;

          }
      }
      document.getElementById("sorted").innerHTML = numsArray;
  } while (swapped);
}
</script>
<div id ="unsorted">Unsorted</div>
<div id ="sorted">Sorted</div>
</body>
</html>

PS - Just out of curiosity... How would I make it display the array each iteration of the outer loop when sorting? So it displays the code run by run.

Thanks!

Possible duplicate of [Javascript : natural sort of alphanumerical strings](https://stackoverflow.com/questions/2802341/javascript-natural-sort-of-alphanumerical-strings) — Tigger, Sep 29 '19 at 03:33

score 1 · Accepted Answer · answered Sep 29 '19 at 03:33

1

Parse the integers before putting into array:

numsArray[i] = parseInt(nums);

answered Sep 29 '19 at 03:33

khan

7,005
15
48
70

Thanks, that solved it, didn't even think of that!! How would I display the array each iteration (while it is moving the numbers from right to left) on the outer loop? If i use document.getElementById("whatever").innerHTML it will just re-write whatever is there currently. – Tman Sep 29 '19 at 03:36
1

@Tman, please note if someone inputs "A123" parseInt will return `NaN`. I would check the parse value before adding it into array. I was going to post my answer doing this, but I'll add it into the comment here. However, I will attach the JSFiddle I made. https://jsfiddle.net/q1kp2j4c/ – Matthew Sep 29 '19 at 03:41
@Matthew could I also do this by checking if(typeof nums === "number") ? Also, any idea how I could display text each iteration of the outer loop so I can watch the sort process happen – Tman Sep 29 '19 at 03:50
@Tman No, because "A123" will return true when using `if (typeof parseInt(nums) === 'number')` because parseInt returns a number with a value of NaN. You can also not use `if (typeof nums === 'number')` because prompt returns a string of the value given, not a number. The safest way is the way in my JSFiddle. – Matthew Sep 29 '19 at 03:54
@Matthew Got it, that makes complete sense now, also the reason why the parseInt fixed my problem. Any idea about the other thing I'm curious about? Displaying each iteration of the outer sorting for loop instead of just re-writing it. – Tman Sep 29 '19 at 03:56
Honestly, I am not 100%. I think it because the prompt is blocking that call somehow because the code is sound. I do not use prompt, I build an element in HTML and gather info that way. If you do want to know, I would ask a new question to get an answer and follow SO guidelines of one answer to one question in post. – Matthew Sep 29 '19 at 03:59
You can show a stringified version of your array in the DOM. Try doing this: `document.getElementById("sorted").innerHTML = JSON.Stringify(numArray);` – khan Sep 29 '19 at 04:28
@khan Hmm did not work for me. I'm trying to have it output the array as it changes each loop, on a new line. – Tman Sep 29 '19 at 04:51

Array sorting works fine with single digits, but not multiple digit values

1 Answers1