Store the inner html of the sibling of the targeted element

Question

I have a code and I just can't make it work. A target occurs on an element and I have to find it's next sibling or I could go to its parent and then search for the sibling's class using queryselector.

The code works perfect if I replace the ** line ** with a query selector, so the problem is with the sibling method its 100%.

Do you have an idea what am I doing wrong?

/*we put on event listener for each "refsz" class*/
var elements = document.getElementsByClassName("refsz");

for (var z = 0; z < elements.length; z++) {
    elements[z].addEventListener('click', callThis, false);
}

/*and when the event occurs, I select the sibling div's innerHTML and change
"success" div's innerHTML to this*/

function callThis() {

**var temp= event.target.nextSibling.innerHTML;**
document.querySelector("#success").innerHTML = temp;
}

<div class="parent">

<div> class="refsz"> I will click this </div>
<div> class="sibling"> I need the innerHTML of this sibling</div>

</div>

<div id="success"></div>

`var text= event.target.parentElement.querySelector(".ClassOf").innerHTML;` outside of a function doesn't make sense — j08691, Mar 30 '20 at 19:29
Show actual code and what is `.ClassOf` since it does not match your sample html — epascarello, Mar 30 '20 at 19:30
No, that's working fine without that parameter. The only part which is not working the sibling part :( — , Mar 30 '20 at 20:08

Ivan86 · Accepted Answer · 2020-03-30T20:34:02.507

You would want to rather call the function nextElementSibling rather than nextSibling.

Explanation on W3schools:

The nextElementSibling property returns the element immediately following the specified element, in the same tree level.

The difference between this property and nextSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).

More here.

Explanation from MDN:

The NonDocumentTypeChildNode.nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.

More here.

You can also read more about the differences between nextSibling and nextElementSibling here.

Other errors:

Your divs did not include the class attribute inside their tags
Inside of the function callThis() you should call this.nextElementSibling instead of this.event.nextSibling
you can also use document.getElementById("success") instead of document.querySelector("#success") since you know the id of the element

Here is the corrected code:

/*we put on event listener for each "refsz" class*/
var elements = document.getElementsByClassName("refsz");

for(var z=0; z < elements.length; z++) {
  elements[z].addEventListener('click', callThis, false);
}

/*and when the event occurs, I select the sibling div's innerHTML and change
"success" div's innerHTML to this*/

function callThis() {
  var temp= this.nextElementSibling.innerHTML;
  document.getElementById("success").innerHTML = temp;
}

<div class="parent">
  <div class="refsz"> I will click this </div>
  <div class="sibling"> I need the innerHTML of this sibling</div>
</div>

<div id="success"></div>

Ivan you are great! This line "var temp= this.nextElementSibling.innerHTML;" solved everything! Thank you very much for your help, I can't tell you how happy you made me! You are AWESOME! — , Mar 30 '20 at 21:01

Store the inner html of the sibling of the targeted element

1 Answers1