Two button javascript with xml(need some help)

Question

i make html with js that load my xml file. now i have button that move to next node on every click. how i make previus button the go back on every click on it.

    <html>
    <head>
    <title>ReadingXmlFile</title>
    <link href="StyleSheet.css" rel="stylesheet" />
    </head>
    <body>
        <center><h1>XML FILE</h1></center>
        <input id="next" type="button" value="LoadXml" onclick="readXML()" />
        <input id="previous" type="button" value="previus" onclick="readXML()" />
        <div>
            <p id="demo"></p>
        </div>
        <script type="text/javascript">
            var i = 0;
            function readXML() {
               
                var xml = new XMLHttpRequest();
                xml.open('GET', 'XMLFile.xml', false);
                xml.send();
                var xmlData = xml.responseXML;
              
                if (xmlData) {
                    xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
                    var det = xmlData.getElementsByTagName("mydetails");
                    var name = det[i].getElementsByTagName("name")[0].firstChild.data;
                    var city = det[i].getElementsByTagName("city")[0].firstChild.data;
                    var bio = det[i].getElementsByTagName("bio")[0].firstChild.data;
                    document.getElementById("demo").innerHTML = "Name: " + name + "<br>" + "City: " + city + "<br>" + "Bio: " + bio;
                    i++;
                }
    
            }
        </script>
    
    </body>
    </html>

Does this even work yet? XMLHttpRequest is Async, you need to change the code. Assume that is why you have if(xmlData) as this problem is occuring. — Bibberty
– Bibberty, Commented Feb 1, 2019 at 17:00

Bibberty · Accepted Answer · 2019-02-01 17:29:48Z

Ok, some changes here to support Next/Previous correctly.

we split out the data load (so it only loads once)
We added seperate click events for next and previous
Added a method that takes the current position and shows.

NOTE: There may be syntax errors as there was no XML to run this against. Sorry.

var i = 0;
var xmlData = undefined;

const setInnerHTML = (position) => {
  if (xmlData) {
    let det = xmlData.getElementsByTagName("mydetails");
    let name = det[position].getElementsByTagName("name")[0].firstChild.data;
    let city = det[position].getElementsByTagName("city")[0].firstChild.data;
    let bio = det[position].getElementsByTagName("bio")[0].firstChild.data;
    document.getElementById("demo").innerHTML = "Name: " + name + "<br>" + "City: " + city + "<br>" + "Bio: " + bio;
  }
};

// Add a document load event, load the XML just once
document.addEventListener('DOMContentLoaded', function() => {
  readXml(() => {
    // Show initial data when XML has loaded
    setInnerHTML(i);
  });

  // Add our click events for previous and next
  document.querySelector('#next').addEventListener('click', (evet) => {
    i++;
    setInnerHTML(i);
  });
  document.querySelector('#previous').addEventListener('click', (evet) => {
    i--;
    setInnerHTML(i);
  });
});

// This function only loads XML now. 
function readXML(onComplete) {
  let xml = new XMLHttpRequest();
  xml.open('GET', 'XMLFile.xml', false);
  xml.onload = function() {
    if (xml.status >= 200 && xml.status < 400) {
      xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
      if (onComplete) onComplete();
    };
    xml.send();
  }
}

<html>

<head>
  <title>ReadingXmlFile</title>
  <link href="StyleSheet.css" rel="stylesheet" />
</head>

<body>
  <center>
    <h1>XML FILE</h1>
  </center>
  <input id="next" type="button" value="LoadXml" />
  <input id="previous" type="button" value="previus" />
  <div>
    <p id="demo"></p>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

Two button javascript with xml(need some help)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related