nodeName makes frequent appearances beyond our expectations

Currently, I have a piece of code that reads an XML document and uses it to construct an HTML page, similar to markdown. In essence, the issue lies in the JavaScript line at the end with CAROUSEL, which is generating 7 carousel divs instead of just 1 as intended. I understand why it's producing 7 instances (to some extent), but I'm unsure how to modify it to only create one. The ITEM tags within the CAROUSEL tag in the XML section indicate which images should be included in each specific 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>

Kind regards, Robbie

Answer №1

It appears that this code is part of a loop, however, it lacks any conditional logic. The current implementation seems to consist of three distinct statements:

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

{
    // This statement always executes - simply a statement within curly braces
    $("#module" + module_element_idcounter).append("...");
}

// This empty statement serves no purpose
;

In order to achieve the desired functionality, you likely need to incorporate an if statement somewhere in your code. To provide meaningful assistance, we would need to see more of your code rather than just this snippet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimal solution: How can we achieve a fixed header and a scrollable body for a table in the

Is there a better way to achieve this? HTML table with fixed headers? Seeking a solution for creating a table with a scrollable body and a static header. After exploring various options, it seems like most available codes are unreliable, not compatib ...

If the value of the input matches, set the checkbox to be

I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...

Nested functions with async-await syntax

I'm attempting to showcase a nested countdown utilizing two nested loops. You can access the complete, functional code on this js.fiddle link. Two key segments are highlighted below: function sleep(ms) { return new Promise(resolve => setTime ...

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates

I've been trying to solve this problem for a long time now, and I've reached a point where I can't seem to figure it out. On a page, there are several forms where users input different information that gets submitted to a mySQL database usin ...

Generate a fresh object if the values within the TypeScript object are identical

How can I filter an object to return a new object containing elements with the same values? For example: allValues = {"id1": 3, "id2": 4, "id3": 3} The desired output is: filteredValues = {"id1": 3, "id3": 3} This is because the keys "id1" and "id3" hav ...

Stop specific words from being entered on a website

Is there a way to block a specific word from being saved in my database? For example, if I want to prevent the term 'fast car' from being stored, what kind of code should I implement using HTML, JavaScript, or PHP on my website? ...

Enforce movement within an element by using "Tab" clicks – Utilizing Jquery/Javascript

I have designed a dialog box with the role of "dialog" and I am looking to focus on Tab key press inside the dialog box. There is a Close button already present in the dialog. Currently, when the dialog opens, focus shifts to the first input button and the ...

Leveraging react props with the .map method

Imagine having this render function in one of your components. You've passed a changeTid prop function from the parent element. Parent Component: <RequestsList data={this.state.data} changeTid={this.changeTid} /> Child Component: (Using ES6 ...

Update the designated dropdown menu using its identification number

I have discovered a way to change the selected dropdown item by value, but I am interested in doing it by the option ID instead. The reason for this is that the values are dynamically generated. Currently, I am working on creating a questionnaire that incl ...

What is the best way to incorporate a fade in effect when a user clicks on a JavaScript dropdown menu?

I found a helpful code snippet on GitHub at this link which allowed me to easily create a dropdown menu. However, I wanted to add a Fade in and out effect when the menu is clicked. Here is my attempted implementation, but unfortunately, the fadeIn functi ...

Updating the current view in Rails with newly fetched data

NOTE: To make it easier, skip to the EDIT part below. Thank you! I am currently working on adding a simple feature to my app. The feature involves a view with a chart that depends on two query parameters: :from and :to. I am using "Chartkick" and below a ...

The switch case functionality refuses to change when I interact with the user interface

Can someone please help me troubleshoot? I'm not receiving any errors in the Chrome console. HTML <div class="wrapper"> <i id="repeat" class="fas fa-stop-circle"></i> </div> Javascript const wrap ...

Can someone help me figure out where I'm going wrong with the JS ternary conditional operator

Looking to improve my JavaScript logic skills as a beginner. Appreciate any tips or feedback on the function and not just this specific question. I'm curious why the code outputs --> [3,5] function divisors(integer) { let divisors = [] for (le ...

Tips for accessing the content within a DIV tag in a new browser tab

$('.menu div.profile-btn').on('click', function () { $('.mainservice-page').fadeIn(1200); } The script above effectively displays the contents of the .mainservice-page div, but I would like to open them in a new tab. Is ...

Here is a unique rewrite of the text:"Implementing a feature to upload an image in PHP and AJAX without

Although it may seem repetitive, I have yet to find a solution that perfectly fits my requirements. I am looking to upload an image to a designated folder by simply selecting a file in the file browser, without the use of a submit button (which I have acco ...

Unable to invoke functions in the child window

In my Vue page, I have a script that opens a child window using the code snippet below: this.presentation = window.open( this.$router.resolve({name:'presentation'}).href, 'child window', 'width=auto,height=auto' ) ...

Navigate to a different page in NextJs without causing a page refresh or altering the current state of the application

Recently, I encountered a challenge in my NextJS application while attempting to incorporate dynamic routes as endpoints on my server. Specifically, when accessing localhost:3000/register, the register.tsx file is loaded successfully. However, within one ...

Tips for enlarging the tree view when running protractor exams. Check out this code excerpt below:

I have a code snippet below that represents one item out of many, each distinguished by ng-reflect-index. I am trying to write a test case to expand these nodes individually using Protractor. However, I am facing an issue in expanding the node using Prot ...

What is the best way to display a 'confirmed' message on my registration page once a user has submitted their information?

I have set up a nodejs server and developed a registration page using HTML. When users click the submit button, the server I built receives the input data and validates it. If the user is successfully added to the database, I want to display a new message ...

Changing a value to display with exactly 2 decimal places using jQuery

Similar Question: JavaScript: how to format a number with exactly two decimals Having successfully added values into a div with a total using some script, I attempt to convert those values into decimal numbers by dividing them by 100 to mimic currency ...