Why did my ChildNodes return undefined on JS event handler?

Question

I am adding click handler into one of table elements. I confirmed it on inspect -> console that this is the returns the value that I need, the address value.

document.getElementById('donut-attributes').parentNode.childNodes[10].childNodes[1].childNodes[30].innerText 
//returns 123 Some Address on console log

This is the complete script on main page:

I set up several alert() to make sure everything works. When it comes down to alert(e.target.parentNode), it shows [object HTMLTableRowElement]. However, when it comes down to alert(e.target.parentNode.childNodes[10]);, it returns undefined.

How can I fix the click handler so when I click any table element, I would get the address value stored into address? Why does it show the address on console log and it shows undefined when I used it with clickhandler?

EDIT: the table html (index.html.erb) looks something like this:

  How can I hover on any element on a table row, click it, and get the corresponding address? (i.e. if I hover and click on the second row, on any column in the second row, I need it to return some_address2)

      
          
            
              Some_image
            

              

                Some_name
              
              
                Some_phone
              
              
                Some_rating
              
              
                Some_address
              

                        
            
              Some_image2
            

              

                Some_name2
              
              
                Some_phone2
              
              
                Some_rating2
              
              
                Some_address2

trincot · Accepted Answer

Duplicate values for the id attribute are not allowed in HTML, so you should remove that attribute from the td with id="address", since it gets repeated.

To identify the "last" row in the group, you could reason that this row has a row index (zero-based) of 4, plus a multiple of 5. Or in other words, it is 4 modulo 5. Once you know the row index of the row that is being clicked in, it is not so hard to find the next row that has such an index:

window.addEventListener('DOMContentLoaded', function(){
  var donutContainer = document.getElementById("donut-attributes");
  donutContainer.addEventListener('click', function(e){
    // Get the clicked element
    var el = e.target;
    // Find row that contains (or is) the clicked element
    while (el.tagName !== 'TR') {
        if (el === this) return; // give up
        el = el.parentNode;
    }
    // Get last row within group of rows
    el = this.rows[el.rowIndex - el.rowIndex % 5 + 4];
    // Get its text
    address = el.cells[0].textContent;
    alert(address);
  });
});

table, td {border: 1px solid}


  
    
        [image 1]
    
    
        name1
    
    
        phone1
    
    
        rating1
    
    
        address1
    
    
        [image 2]
    
    
        name2
    
    
        phone2
    
    
        rating2
    
    
        address2

Note that if you have a special header row in your table, or other rows that do not follow the multiple-of-five pattern, the formula has to be adapted accordingly.

Why did my ChildNodes return undefined on JS event handler?

Answers (2)

Related Questions