nodeName returns more often than expected

Question

I've got some code that's reading an XML document and then using that to build the HTML page. Similar to markdown I suppose. I've simplified the below code but effectively that JS line at the end with CAROUSEL in it is looking at the XML, but it is creating 7 carousel divs instead of 1 like I want. I get why it's returning 7 times (sort of), but how do I get it to only create it once. the ITEM tags inside of the CAROUSEL tag (see the XML section) is to indicate what images should be inside that particular carousel.

JS:

         var col9div = null;
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            var  xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET",'xml/index'+page_counter+".xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML;
        var col9div = document.createElement("div");

                                });
                                var tempvar = arr.length;
                                console.log(tempvar);
        $(col9div).addClass("col-md-9");
        $("#bannersize").append(col9div);
        flush();
        function flush(){
            var activity_element_idcounter = 0;
            var module_element_idcounter = 0;
            var x=xmlDoc.getElementsByTagName("MODULE");

            for (i=0;i<x.length;i++)
            {
                var getlastli = $(".sidecounter:last");

                module_element_idcounter++;
                col9div.insertAdjacentHTML('beforeend', '<div class="row"><div class="col-md-12 well"' + ' id="module' + module_element_idcounter + '"><div id="skrollr-div' + module_element_idcounter + '"></div></div>');
                var scanner = x[i].getElementsByTagName("*");
                for (var q=0;q<scanner.length;q++){
                    activity_element_idcounter ++;

                $.each(scanner[q].childNodes, function(){
else if (scanner[q].nodeName === "CAROUSEL"){
do something here
}

XML:

<MODULE>
        <CAROUSEL>
                <ITEM>assets/images/index5/tehran-carousel/tehran-day-and-night.jpg</ITEM>
                <ITEM>assets/images/index5/tehran-carousel/tehran-day-and-night-1.jpg</ITEM>
                <ITEM>assets/images/index5/tehran-carousel/tehran-bazaar-entrance.jpg</ITEM>
        </CAROUSEL>
</MODULE>

thanks, Robbie

Answer 1

I assume this is executing in some kind of loop that you haven't shown us, but you are not using any conditional logic. What you seem to be getting is three separate statements:

// Always just evaluates to false and does nothing; the return value of
// getElementsByTagName() does not have a nodeName property
xmlDoc.getElementsByTagName("MODULE").getElementsByTagName("*").nodeName === "CAROUSEL"

{
    // Always executes - simply a statement inside some curly braces
    $("#module" + module_element_idcounter).append("...");
}

// Empty statement - does nothing
;

To get it to work the way you want it to, you probably need to use an if statement somewhere, but in order for us to help you, you need to show us more of your code than the tiny sampling you have provided.