Javascript - getting the value of child element after clicking on another child element

Question

This must be very simple, but I still cannot figure it out... Below is an example and what I tried - all I want is to get the value of <a id="{value}".. after clicking on the <div class="text" DIV.

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(parentNode.parentElement.firstChild.childNodes[1].a.id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

Answer 1

As the element has an ID, you can just look it up by that ID. IDs have to be unique (but keep reading, I suspect you don't want to do that) :

alert(document.getElementById('m75813').id);

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(document.getElementById('m75813').id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

but if you have lots of these with various IDs and it's the ID you're trying to find, you can do it by going up to the parent node and using querySelector to find the a element:

alert(this.parentNode.querySelector('a').id);

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(this.parentNode.querySelector('a').id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m54684" href="#m54684">#</a></div> </div> <div class="text" onclick="alert(this.parentNode.querySelector('a').id);"> After clicking on the yellow background, the value from [a id="m54684"] (ie. 'm54684') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

In both cases, I would suggest modern event handling rather than using onxyz -attribute-style handlers. For example: Let's assume all those article elements are in some kind of container. We can hook click on the container and then find which div the click passed through, and find the a related to that div :

document.getElementById("container").addEventListener("click", function(e) {
  var element = e.target;
  while (element != this) {
    if (element.matches("div.text")) {
      alert(element.parentNode.querySelector("a").id);
      break;
    }
    element = element.parentNode;
  }
});

 document.getElementById("container").addEventListener("click", function(e) { var element = e.target; while (element != this) { if (element.matches("div.text")) { alert(element.parentNode.querySelector("a").id); break; } element = element.parentNode; } }); 

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <div id="container"> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m54684" href="#m54684">#</a></div> </div> <div class="text"> After clicking on the yellow background, the value from [a id="54684"] (ie. '54684') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> </div> 

Answer 2

You can do this:

<div class="text" onclick="alert(document.getElementById('m75813').id);">
    After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world.
  </div>

Answer 3

What's happening is that your queries are returning text nodes (which includes whitespace like newlines) as well as HTML nodes, so your elements aren't at the index you expect. querySelector('a') is the simpler approach, but if you did want to select your target via it's place in the DOM structure, you could use firstChildElement and children instead of firstChild and childNodes , respectively, because they exclude text nodes:

this.parentElement.firstElementChild.children[1].firstElementChild.id

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(this.parentElement.firstElementChild.children[1].firstElementChild.id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article>