Troubleshoot: Difficulty with accessing nested tag name using getElementsByTagName

I'm currently working with a div that contains a table and its data pulled from a database.

<div id="content">
<table>
<tbody>
   <tr>
       <th class="header" colspan="2">Food items include:</th>
   </tr>
   <tr>
      <td id="15" class="fruits">Papaya+salt</td>
      <td><p>This includes papaya and salt</p></td>
   </tr>
   <tr>
      <td class="meat">Baked chicken</td>
      <td><p>This includes a chicken thide and kethup</p></td>
   </tr>
   <tr>
      <td id="1" class="Juices">Strawberry Sting</td>
      <td><p>Sugar, color and water</p></td>
   </tr>
<table>
</div>

This specific table is found within a page.aspx file.

Below is the code I've implemented to sort the data alphabetically within the table:

OldFunc = window.onload;
window.onload = OnLoad;

function OnLoad(){
    try{
        var pathName = window.location.pathname.toLowerCase();
        if( pathName=="/Resources/Glossary.aspx") {
                sort_it();
            }   
        OldFunc();
    }
    catch(e) {
    }
} 

function TermDefinition(def_term,def_desc)
{    
    this.def_term=def_term;  
    this.def_desc=def_desc; 
}    

function sort_it()
{
    var gloss_list=document.getElementsByTagName('td');    
    var desc_list=document.getElementsByTagName('td p');    
    var gloss_defs=[];   
    var list_length=gloss_list.length;     
    for(var i=0;i<list_length;i++)    
    {      
       gloss_defs[i]=new TermDefinition(gloss_list[i].firstChild.nodeValue,desc_list[i].firstChild.nodeValue);      
    }     
    gloss_defs.sort(function(a, b){
      var termA=a.def_term.toLocaleUpperCase(); 
      var termB=b.def_term.toLocaleUpperCase();
      if (termA < termB) 
       return -1;
      if (termA > termB)
       return 1;
      return 0; 
    })    
    for(var i=0;i<gloss_defs.length;i++)
    {
       gloss_list[i].firstChild.nodeValue=gloss_defs[i].def_term;
       desc_list[i].firstChild.nodeValue=gloss_defs[i].def_desc;  
    }
}

I believe there may be an issue with the getElementsByTagName function, as it seems like the output is not being manipulated correctly.

Answer №1

Not Valid:

element_list=document.getElementsByTagName('div');

You are not allowed to input a css selector into that function, only a specific tag name like section article aside etc'.

You may consider using:

element_list = $('div');

Considering that you marked the question with jQuery, or document.querySelectorAll for plain javascript:

element_list = document.querySelectorAll('div');

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

Exploring the power of CSS grid in React/Gatsby for creating dynamic layouts with varying numbers of columns in each

I need help creating a dynamic grid layout where the number of columns alternates between rows. For example, I want the first row to have one column, the second row to have two columns, and so on. Right now, my grid only has two columns per row. Does anyon ...

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

Programme for Server Login

After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...

Enhancements in Converting JSON Objects to HTML Lists Using jQuery

I have created a function that converts a multi-dimensional JSON object into an HTML list. You can check it out here: http://jsfiddle.net/KcvG6/ Why is the function rendering the lists twice? Update: http://jsfiddle.net/KcvG6/2/ Are there any impro ...

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

How can I display Estimated delivery days below the product title to inform my customers about their order's arrival date, similar to the example on the page included in the link? I would like it to show varying days depending on the shipping class. ...

Updating File Owner with Google Drive API - Permission Error 400 "Field 'Permission Type' is mandatory"

I've been utilizing the Google Drive API within Google Apps Script. This particular script is written in sandboxed server-side Javascript, which restricts the use of the Google Client API for Javascript. As a Google Apps super admin, I am authenticat ...

Securing Node function parameters in an asynchronous environment

I've been grappling with a pressing question lately, and I just can't seem to find a definitive answer. Let me share with you a Node function that I frequently use. It manages web requests and conducts some input/output operations: function han ...

Having trouble displaying the Primevue dialog modal in Vue 3?

I am using [email protected] and [email protected] Main script import { createApp } from 'vue' import App from './App.vue' import router from './router' import PrimeVue from 'primevue/config'; import &apos ...

PHP link malfunctioning

Recently, I have been working on adding links to new pages in PHP using Panique for authorization. You can find more information about Panique here. In the views directory, I created a new page called product-des.php. However, when I tried to add a link f ...

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

Positioning elements precisely on a webpage through absolute positioning and floating them

This seems to present a conflicting situation. Ideally, I am looking to position two child elements on the left and right edges of the parent element, vertically centered, and overlaying all other sibling elements. ...

Weaknesses found in the React Js library bundled with create-react-app

Each time I initiate a new react project using npx create-react-app <AppName>, the following vulnerabilities are detected: 96 vulnerabilities found - Packages audited: 1682 Severity: 65 Moderate | 30 High | 1 Critical Node Version: v14.18.1 Npm: 7.20 ...

Accessing Form Data with jQuery for AJAX Request

Is there a way to send form values through AJAX to a PHP file? How can I gather the form values and pass them as data in the AJAX request? $.ajax({ type: "POST", data: "submit=1&username="+username+"&email="+email+"&password="+ ...

Utilize AJAX, jQuery, and Symfony2 to showcase array information in a visually appealing table format

I have a requirement to showcase data utilizing ajax and jQuery in a table on my twig file. The ajax call is made with a post request to the controller, where the controller attempts to input several rows from a csv file into the database. However, there ...

The button is not being vertically centered when using the boostrap pull-right class

---------------------------------------------------------------- | Title | | Button | --> (using .pull-right) the button is not aligned vertically ------------------------------------------------------------- ...

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

Adjust Bootstrap form positioning to be fixed at the bottom of the page

Can anyone provide assistance with positioning this form at the bottom of the page? <form> <div class="form-group"> <input type="email" class="form-control" id="" aria-describedby="emailHelp" placeholder="Enter email"> &l ...

The process of retrieving request data from axios.get and storing it in the Redux store

Recently delving into Redux, I'm curious about how to retrieve request data from a GET method. Upon mounting the component, you can use axios to send a GET request to '/api/v3/products', passing in parameters like pageNumber and pageSize. ...