16

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!

user74843
  • 701
  • 2
  • 10
  • 28
  • 1
    Note that the [*forEach*](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) method of the NodeList interface is not supported by a good number of browsers in use. – RobG Jun 21 '17 at 12:39
  • @RobG thanks for the info. I will look forward to a *[].slice* free time... – Jonas Wilms Jun 21 '17 at 12:43

1 Answers1

15

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

Komninos
  • 414
  • 4
  • 17