This site is mobile accessible. Press the "Tap Here" button to use a different font-size.
Tap Here!

Smartphone icons created by Freepik - Flaticon

// button click event onclick="previous()"
onclick="previous()" value="<<"

// button click event onclick="next()"
onclick="next()" value=">>"

// 
let i = 0;
let len;
let cd;

// defines XMLHttpRequest functiom
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  const xmlDoc = xhttp.responseXML;
  cd = xmlDoc.getElementsByTagName("CD");
  len = cd.length;
  displayCD(i);
};

// defines the XMLHttpRequest Object
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();

// defines how the data is displayed
function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

// defines the next and previous buttons
function next() {
  if (i < len-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  if (i > 0) {
    i--;
    displayCD(i);
  }
}