Javascript greater than (>) operator not working properly

Question

I am trying to make a visual tool depicting how some sorting algorithms work similar to the video at this link except with 20 values only. The idea is to have bars that are are x percent long where x is a random number and I'm using grid to arrange the bars according to the numbers they represent. As a first I'm trying to do a brute force sort with the following code:

sleep(ms){
  return new Promise((resolve) => setTimeout(resolve, ms));
}
async function bruteForce() {
  let vals = [...grid.querySelectorAll(".grid-item")];

  for (let i = 0; i < vals.length; ++i) {
    for (let j = 0; j < vals.length; ++j) {
      if (i != j) {
        vals[i].classList.add("compare");
        vals[j].classList.add("compare");
        const node1val = parseInt(vals[i].getAttribute("data-value"));
        const node2val = parseInt(vals[j].getAttribute("data-value"));

        if (node2val > node1val) {
          console.log(node2val + " > " + node1val);
          const node1Class = vals[i].className;
          vals[i].className = vals[j].className;
          vals[j].className = node1Class;
        } else {
          console.log(node2val + " < " + node1val);
        }

        await sleep(300);
        vals[i].classList.remove("compare");
        vals[j].classList.remove("compare");
      }
    }
  }
}

The problem is that the values do not get sorted properly. The values 5, 87, 56, 45, 20 get sorted as 20, 45, 56, 87, 5.

The following is the console output:

I've highlighted the wrong ones. Why does the interpreter think 5 is greater than 20? How do I correct this?

Update: Fixed the string comparison. Still getting the wrong order of values. The console output, however is correct now. JSfiddle demo

Alphabetically, the sorting is correct. Though why don't you use `sort()` ? — Mike Brockington, Jun 04 '20 at 14:31
The built-in sort will work on anything - you just need to provide a small/simple comparison function when working with objects. — Mike Brockington, Jun 08 '20 at 11:01
@MikeBrockington Tried using sort. The elements do get sorted. However the displayed elements do not change since their order is dictated by the grid through the class name g-i-1, g-i-2, g-i-3, and so on. — FrankenCode, Jun 10 '20 at 12:52

score 0 · Answer 1 · answered Jun 04 '20 at 14:31

0

I guess that You compare String to String.

45 < 5 is false, however "45" < "5" is ture

Try to use parseInt() function to convert string to int.

answered Jun 04 '20 at 14:31

Łukasz Olszewski

799
4
8

score 0 · Answer 2 · answered Jun 04 '20 at 14:33

0

attribute values are String,you should convert them to number

const node1val = parseInt(vals[i].getAttribute("data-value"));
const node2val =  parseInt(vals[j].getAttribute("data-value"));

answered Jun 04 '20 at 14:33

Ehsan Nazeri

717
1
5
9

Javascript greater than (>) operator not working properly

2 Answers2