Take the different id from the same link click

Question

In a source code of a page there is a unique external link in different parts of the page 4 times.

I want to trigger which click user clicked because some line before it there is an id I want to save it to a variable if the user click to the specific link.

A quick example:

<div class="mydiv">
<p id="id1">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id2">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id3">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

How can I check if the user makes a click to the second link that the id is id2 and save it to a variable etc.? In my page there are also other hrefs but I want to check only the specific case.

Answer 1

You need to traverse the DOM to the right element.
First we find the div with class myDiv and then p element with id attribute.

var forEach = Array.prototype.forEach;

forEach.call(document.getElementsByTagName('a'), function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    var p = link.parentNode.parentNode.querySelector("p[id]");
    alert(p.getAttribute('id'))    
  })
}, false);

<div class="mydiv">
  <p id="id1">test</p>
  <p></p>
  <p></p>
  <p></p>
  <div> <a href="www.outboundlink.com"> click </a> 
  </div>
</div>

<div class="mydiv">
  <p id="id2">test</p>
  <p></p>
  <p></p>
  <p></p>
  <div> <a href="www.outboundlink.com"> click </a> 
  </div>
</div>

<div class="mydiv">
  <p id="id3">test</p>
  <p></p>
  <p></p>
  <p></p>
  <div> <a href="www.outboundlink.com"> click </a> 
  </div>
</div>

If you don't mind using jQuery for it, the code is much shorter:

$('a').on('click', function(e) {
  e.preventDefault();
  var first = $(this).closest('.mydiv').find('p:first');
  console.log(first.attr('id'))
})

Answer 2

This is another way of doing it. If you don't have control over the created a elements and binding gets tricky, you can use delegation which saves you from traversing the DOM upwards.

var divs = document.querySelectorAll('.mydiv');
Array.prototype.forEach.call(divs, function(div){
  div.addEventListener('click', function(e){
    if(e.target.tagName === 'A' && div.querySelector('p#id2')){
      alert('Found id2');
      }
    });
  });

<div class="mydiv">
<p id="id1">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id2">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id3">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

Answer 3

You can process the click event on these easily enough:

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
    list[index].addEventListener("click", handleClick, false);
}

Then in the handler, use parentNode repeatedly to find the .mydiv, then find the paragraph with the id:

function handleClick() {
    var mydiv = this.parentNode;
    var p;
    while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
        mydiv = mydiv.parentNode;
    }
    if (mydiv) {
        p = mydiv.querySelector("p[id]");
        if (p) {
            // Use p.id here, it's the ID
        }
    }
}

Note that once you're done processing the click, the page you're in will be torn down and replaced with the result of following the link. So if you grab the ID to a variable, you'll need to do something with it (like put it in local storage) right away.

Also note that your links are probably invalid, href="www.outboundlink" is a relative link within the site. It would need http://, https://, or // to go to another site.

Live Example:

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
  list[index].addEventListener("click", handleClick, false);
}

function handleClick(e) {
  var mydiv = this.parentNode;
  var p;
  while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
    mydiv = mydiv.parentNode;
  }
  if (mydiv) {
    p = mydiv.querySelector("p[id]");
    if (p) {
      // Use p.id here, it's the ID
      alert("The ID is " + p.id);
    }
  }
  e.preventDefault(); // Just for demonstration purposes
}

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

---

Like many DOM traversal things, this can be made much simpler using a DOM wrapper library like jQuery:

$('a[href="www.outboundlink.com"]').on("click", function() {
    var id = $(this).closest(".mydiv").find("p[id]").attr("id");
    alert("The ID is " + id); // will be undefined if not found
});

$('a[href="www.outboundlink.com"]').on("click", function() {
  var id = $(this).closest(".mydiv").find("p[id]").attr("id");
  alert("The ID is " + id);
  return false; // Just for demonstration purposes
});

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>