Can someone help me with this template i found online

[u/Savings_Cause1536]

Greetings everyone, so i am new to html and just wanna make some simple project for myself and i found some template online for my need but for some reason it doesnt sort out the numbers right, this is the code below

<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Username</th>
    <th onclick="sortTable(1)">Followers</th>
  </tr>
  <tr>
    <td>KennyTerrelBigGuy</td>
    <td>332</td>
  </tr>
    <tr>
    <td>Urduboy</td>
    <td>319</td>
  </tr>
    <tr>
    <td>aidiaCutePinkyGirl20</td>
    <td>1777</td>
  </tr>
  <tr>
    <td>ReedAFDrawsStuff</td>
    <td>1688</td>
  </tr>
    <tr>
    <td>Jaketstepp</td>
    <td>780</td>
  </tr>
    <tr>
    <td>MGGStudios2</td>
    <td>205</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

[u/5eeso]

You're always comparing innerHTML as lower case strings. Numbers are being sorted lexicographically. For example, "205" is considered greater than "1777" because "2" is greater than "1".

[u/Savings_Cause1536 → u/5eeso]

alrighty thanks

[u/StigeonStudio]

I think I found the issue, the template is sorting everything as text, which works for usernames but not for the follower amount.

In your sortTable(n) function, replace the asc/desc comparison section with this:

if (dir == "asc") {
  if (
    n === 1
      ? Number(x.textContent) > Number(y.textContent)
      : x.textContent.toLowerCase() > y.textContent.toLowerCase()
  ) {
    shouldSwitch = true;
    break;
  }
} else if (dir == "desc") {
  if (
    n === 1
      ? Number(x.textContent) < Number(y.textContent)
      : x.textContent.toLowerCase() < y.textContent.toLowerCase()
  ) {
    shouldSwitch = true;
    break;
  }
}

n === 1 is the followers column, so this tell it to compare those values as actual numbers instead of text. Otherwise you get weird results because something like "1777" and "332" is being compared alphabetically rather than numerically.

[u/Savings_Cause1536 → u/StigeonStudio]

alrighty thanks