Plain Javascript: event.target : Get the next Sibling, & the first Child [duplicate]

Question

I have an HTML table and have set up event listeners for each row:

var greyHeadings = document.querySelectorAll(".grey");

console.log(greyHeadings);

greyHeadings.forEach(function(greyHeading){
  greyHeading.addEventListener('click', function(e){
    displayDescription(e, greyHeading);
  });
});

The function which is called ( displayDescription ) is the following one:

function displayDescription(e, greyHeading){
  var desc = e.target.parentNode.nextSibling.firstChild;
  console.log(desc);
}

It does get me the correct target, but it seems that nextSibiling.firstChild does not work. I need to get to the next row (so, the sibling), and find the first td (so, the first Child), so i can add a active class to it, -in case you're wondering.

I have also created a jsfiddle: https://jsfiddle.net/7vpzLfke/

I am a beginner, so an explanation which is a little bit more detailed would be greatly appreciated!

Answer 1

You will have to use nextElementSibling instead of nextSibling, since nextElementSibling always returns an HTML Element. More on that here