Html/XML getting stuck looking for a node it shouldn’t be

I’m working on a small xml/html interface to list a bunch of buttons, and I’m having an issue with what I think is it looking for item types in nodes it shouldn’t be.

The XML has a <set> of groups, and inside that will be <items> which has a <type>, a ‘button’ or ‘break’.
After a check if <type> is a ‘button’, it then loads the <name>, but it seems to be trying to load <name> on ‘break’ types as well?

$(document).ready(function(){   
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","list.xml",false);

    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    
    var data_sets = xmlDoc.getElementsByTagName("set");
    
    for (var i = 0; i < data_sets.length; i++) {
        $("body").append('<div id="set'+i+'"> <h2>SetContent'+i+'</h2></div>');  
        
        for (var j = 0; j < data_sets[i].children.length; j++) {
            var type = data_sets[i].getElementsByTagName("type")[j].childNodes[0].nodeValue;
            
            if(type=="button"){
                var name = "name";
                
                name = data_sets[i].getElementsByTagName("name")[j].childNodes[0].nodeValue;
                //commenting out this name line above seems to stop the crash?

                $("#set"+i).append('<button type=button id="btn_'+i+'_'+j+'">'+name+'</button>');

            }else if(type=="break"){
                $("#set"+i).append('<br>');
            }
        }
    }
}); 

And the XML:

<?xml version="1.0" encoding="UTF-8"?>
<data>
<set name="Set A">
  <item>
      <type>button</type>
      <name>btn 1 A</name>
      <color>#ff00ff</color>
  </item>
    <item>
      <type>button</type>
      <name>btn 1 B</name>
      <color>#ff00ff</color>
  </item>
  <item>
      <type>break</type>
  </item>
    <item>
      <type>button</type>
      <name>btn 1 C</name>
      <color>#ff00ff</color>
  </item>
</set>
<set name="Set B">
  <item>
      <type>button</type>
      <name>btn 2 A</name>
      <color>#ff00ff</color>
  </item>
  <item>
      <type>break</type>
  </item>
    <item>
      <type>button</type>
      <name>btn 2 B</name>
      <color>#ff00ff</color>
  </item>
    <item>
      <type>button</type>
      <name>btn 2 C</name>
      <color>#ff00ff</color>
  </item>
</set>

</data>

Answer

You are looking up the jth type element, when you need ot llok up the jth item element.

It is a one line change, below:

$(document).ready(function(){   
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","list.xml",false);

    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    
    var data_sets = xmlDoc.getElementsByTagName("set");
    
    for (var i = 0; i < data_sets.length; i++) {
        $("body").append('<div id="set'+i+'"> <h2>SetContent'+i+'</h2></div>');  
        
        for (var j = 0; j < data_sets[i].children.length; j++) {
            var type = data_sets[i].getElementsByTagName("type")[j].childNodes[0].nodeValue;
            
            if(type=="button"){
                var name = "name";
                
//I have changed how you reference the name element
                name = data_sets[i].getElementsByTagName("item")[j].getElementsByTagName("name")[0].childNodes[0].nodeValue
                
                $("#set"+i).append('<button type=button id="btn_'+i+'_'+j+'">'+name+'</button>');

            }else if(type=="break"){
                $("#set"+i).append('<br>');
            }
        }
    }
}); 
            

(and its a bit odd to have a variable named ‘type’, but that’s beside the point)