Kamal Singh Kamal Singh - 2 months ago 9
HTML Question

I have wriiten a code in javascript to sort comma seperated values(digits) and for specific set of values my sorting of ascending order isn't working

My javascript code is basically accepting input from user through textbox which contains values(digits and alphabets) in seperate textboxes such that after clicking on specific sort button,for example if it's ASC it will sort the values of textbox in ascending order and if it's DESC it will sort the values in descending order on event click the proper function gets called and executed.But when i enter values as {4,5,2,13} into the textbox the result after ASC is unexpected and not desired at all,it shows values in the order:13,2,4,5 So please help me with this!Below is the Code:-



<!DOCTYPE html>

<html>

<head>
<title>Sum of two numbers</title>
</head>

<body>
<h1>Enter any amount of numbers separated by a comma:</h1>
<input id="nums" type="text" required="required" placeholder="digits" />
<button onclick="Ascend()">ASC</button>
<button onclick="Descend()">DESC</button>
<input id="nums1" type="text" required="required" />
<br /><br /><br />
<input id="nums3" type="text" required="required" placeholder="alphabets" />
<button onclick="Ascend1()">ASC</button>
<button onclick="Descend1()">DESC</button>
<input id="nums4" type="text" required="required" />
<h3 id="Sorted"></h3>

<script lang="javascript">
var numsd;
var nums;
var len;
var abc;
var l;
var pqr;

function Ascend() {
nums = document.getElementById("nums").value.split(",");

var last = nums.length - 1;
len = nums.length;
var temp;
for (i = 0; i < nums.length; ++i) {
for (j = i + 1; j <= last; ++j) {
if (nums[i] > nums[j]) {
temp = nums[j];
nums[j] = nums[i];
nums[i] = temp;
}
}
}

//for (i = 0; i < last; i+=1) {
// j = i+1;
// if (nums[i] > nums[j]) {
// temp = nums[j];
// nums[j] = nums[i];
// nums[i] = temp;
// }


//}
document.getElementById("nums1").value = "";
document.getElementById("nums1").value = nums;
//numsd = nums;


}
function Descend() {


numsd = document.getElementById("nums").value.split(",");
var last = numsd.length - 1;
len = numsd.length;
var temp;
for (i = 0; i < numsd.length; ++i) {
for (j = i + 1; j <= last; ++j) {
if (numsd[i] < numsd[j]) {
temp = numsd[j];
numsd[j] = numsd[i];
numsd[i] = temp;
}
}
}
document.getElementById("nums1").value = "";
document.getElementById("nums1").value = numsd;
}
function Ascend1() {
debugger;
abc = document.getElementById("nums3").value.split(",");
var lt = abc.length - 1;
l = abc.length;
var tem;
for (i = 0; i < l; ++i) {
for (j = i + 1; j <= lt; ++j) {
if (abc[i] > abc[j]) {
tem = abc[j];
abc[j] = abc[i];
abc[i] = tem;
}
}
}
document.getElementById("nums4").value = "";
document.getElementById("nums4").value = abc;
//pqr = abc;

}
function Descend1() {
debugger;
pqr = document.getElementById("nums3").value.split(",");
var lt = pqr.length - 1;
l = pqr.length;
var tem;
for (i = 0; i < l; ++i) {
for (j = i + 1; j <= lt; ++j) {
if (pqr[i] < pqr[j]) {
tem = pqr[j];
pqr[j] = pqr[i];
pqr[i] = tem;
}
}
}
document.getElementById("nums4").value = "";
document.getElementById("nums4").value = pqr;
//pqr = abc;
}

</script>
</body>

</html>




Answer

It treats your numbers as strings. Input is a string, for example: "13,2", when parsed it returns a array contaning two strings "13" and "2".

So "13" is smaller than "2" since the first character "1" in the first string is smaller than the first character in the second string "2"

To parse it as integers before doing the comparison you could use: parseInt(string, radix)

EDIT:

I think:

if (parseInt(nums[i], 10) > parseInt(nums[j], 10))

would do the trick.