bubble sort on div using height of div fails

Bubble sort function doesn’t sort div’s according to their height.
Can anyone figure out whats wrong here
Try running code multiple times if sorted correctly at first

if statement in bubble sort is exexuted even if condition is false

Here is codepen link to code

Sort function

function resolveAfterXSeconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, x * 1000);
  });
}

function swap(el1, el2) {
  const style1 = window.getComputedStyle(el1);
  const style2 = window.getComputedStyle(el2);

  const transform1 = style1.getPropertyValue("height");
  const transform2 = style2.getPropertyValue("height");

  el1.style.height = transform2;
  el2.style.height = transform1;
  console.log(`swapped ${transform1} ${transform2}`);
}

async function bubble_sort() {
  let arr = document.querySelectorAll(".bar");

  for (let i = 0; i < arr.length - 1; i++) {
    // let i = 0;
    for (let j = 0; j < arr.length - i - 1; j++) {
      arr[j].style.background = "red";
      arr[j + 1].style.background = "red";

      const ht1 = arr[j].style.height;
      const ht2 = arr[j + 1].style.height;
      if (ht1 > ht2) swap(arr[j], arr[j + 1]);
      await resolveAfterXSeconds(0.5);

      arr[j].style.background = "yellow";
      arr[j + 1].style.background = "yellow";
    }
    arr[arr.length - i - 1].style.background = "green";
  }
}

114 thoughts on “bubble sort on div using height of div fails”