failing to use .nextSibling

Asked Dec 08 '20 at 20:58

Active Dec 08 '20 at 21:03

Viewed 27 times

i am trying to select the next td and add a class to it by using nextSibling but it doesn't seem to work.

const player2pos = document.querySelector("#player2-race .active");
player2pos.nextSibling.classList.add("active");

what i get:

Uncaught TypeError: Cannot read property 'add' of undefined at HTMLDocument.

when i console.log(document.querySelector("#player2-race .active")), it shows that i selected the right td. can someone tell me what i am doing wrong?

EDIT: here is the html

        <tr id="player2-race">
          <td></td>
          <td></td>
          <td></td>
          <td class="active"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

edited Dec 08 '20 at 21:03

asked Dec 08 '20 at 20:58

пaean

You should show some html too. Maybe you are selecting the last element of that row? – arieljuod Dec 08 '20 at 21:00
@arieljuod it is currently the 4th element (of 12) – пaean Dec 08 '20 at 21:01
@imvain2 yes! thanks a million – пaean Dec 08 '20 at 21:24
Oh I get it, use `.nextElementSibling` instead of `.nextSibling`. The former returns the next HTML element, the later returns the next element (which in this case is the new line character) – arieljuod Dec 09 '20 at 00:35

failing to use .nextSibling

0 Answers0