'Numeric and alphabetic sorting XML table error from buttons

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>


  <h2>The XMLHttpRequest Object</h2>

  <button type="button" onclick="loadDoc()">Get my CD collection</button>
  <button type="button" onclick="sortTable()">Get my alphabetic collection</button>
  <button type="button" onclick="cheapestPrice()">Get my cheapestPrice</button>
  <br><br>
  <table id="demo"></table>
  
  <script>
  function loadDoc() {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
      myFunction(this);
    }
    xhttp.open("GET", "Work.xml");
    xhttp.send();
  }
  function myFunction(xml) {
    const xmlDoc = xml.responseXML;
    const x = xmlDoc.getElementsByTagName("CD");
    let table="<tr><th>Artist</th><th>Title</th><th>Year</th><th>Price</th></tr>";
    for (let i = 0; i <x.length; i++) { 
      table += "<tr><td>" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "</td><td>" +
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "</td><td>" +
        x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
      "</td><td>" +
      x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
      "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
  }
  
  /* ALPHABETIC ORDER */
  function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("demo");
  switching = true;
  while (switching) {
     switching = false;
    rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
       shouldSwitch = false;
      x = rows[i].getElementsByTagName("ARTIST")[0];
      y = rows[i + 1].getElementsByTagName("TITLE")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        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;
    }
  }
}


function cheapestPrice () {
    var table = document.getElementById("demo"),minVal;
    for (var i = 1; i< table.rows.length; i++) {
        if (i=== 1 )(minVal = table.rows[i].getElementsByTagName("PRICE"));
        else 
        if (minVal>table.rows[i].getElementsByTagName("PRICE")) {
            minVal = table.rows[i].getElementsByTagName("PRICE");
        }
    }
}
</script>
</body>
</html>

MY XML TABLE(Work.xml)

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE> 
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>

I need two buttons: The first one is sorting the table alphabetically according to the artist's name but there is an error with the table. it probably can't read the innerHTML and if I try to change it, it shows another error on the row.length. The second one is finding the smallest price. In the console, there is no error when I press the button but still can't find a solution.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Numeric and alphabetic sorting XML table error from buttons

Sources

Related Questions