i have to trigger parent div when i click on any child div?

Question

my html code: if i click any child div inside demo class it has trigger parent id ie(id:1,2,3,....).

<div class="click">

    <div class="category-list demo" id="1" data-dismiss="modal">
        <div class="category-name">
            technology
        </div>
        <div class="category-progress">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                    <span class="sr-only">70% Complete</span>
                </div>
            </div>

        </div>
    </div>

</div>

<div>
    <section class="timeline" id="a"></section>
    <section class="timeline" id="b"></section>
    <section class="timeline" id="c"></section>
</div>

jquery code:

window.onload = function() {

  document.querySelector('.click').addEventListener('click', function(e) {

      var id=e.target.id;
      var val=Number(id);
      if(val===NaN){
        console.log(val); 

      }
    else{
        currentDiv(val);      
          console.log("Number:"+val);

    }
    });
};
var slideIndex = 1;
showDivs(slideIndex);


function showDivs(n) {
    $('html, body').animate({scrollTop: '0px'}, 800);
  var i;
  var x = document.getElementsByClassName("timeline");
    console.log("X value:"+x.length);
    console.log("N value:"+n);
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  

  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" btn-warning", "");
  }
  x[slideIndex-1].style.display = "block";  
     console.log("x Array:"+x[slideIndex-1].style.display);
  dots[slideIndex-1].className += " ";

}

});

i face a problem that if click on category-name (or)category-progress it is showing id=0 but i have get parent id ie 1.

Answer 1

You can use Jquery for this

  $(".click").click(function(event){
    var parentId = $(event.currentTarget).closest('div.category-list').attr('id');
    console.log(parentId);
  });

or

  $(".click").click(function(event){
    var parentId = $(event.currentTarget).parent().attr('id');
    console.log(parentId);
  });

and just add your click selector to your child divs.

<div class="category-list demo" id="1" data-dismiss="modal">
    <div class="category-name click">
        technology
    </div>
    <div class="category-progress click">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                <span class="sr-only">70% Complete</span>
            </div>
        </div>

    </div>
</div>

Answer 2

It doesn't work because when you click over technbology or 70% Complete text, the target that the event is catching is a DivElement for 'technology' and SpanElement for 70% Complete , so when you try to get de ID with 'var id=e.target.id;' you are not position in the element with the id attribute you are in their child.

To fix this you haven't got to use the parent DivElement with class click if recommended to use class category-list for example because you want to get the ids where you click in the list.

Change the QuerySelector for '.category-list':

document.querySelector('.category-list').addEventListener('click',

Change the way that get de id attribute:

With jQuery:

var id = $(this).attr('id');

With Pure Javascript:

var id = this.getAttribute("id")

You can use any solution, jQuery or Pure JS.

The complete solution:

window.onload = function() {

  document.querySelector('.category-list').addEventListener('click', function(e) {

      var id=$(this).attr('id');
      var val=Number(id);
      if(val===NaN){
        console.log(val); 

      }
    else{
        currentDiv(val);      
          console.log("Number:"+val);

    }
    });
};
var slideIndex = 1;
showDivs(slideIndex);


function showDivs(n) {
    $('html, body').animate({scrollTop: '0px'}, 800);
  var i;
  var x = document.getElementsByClassName("timeline");
    console.log("X value:"+x.length);
    console.log("N value:"+n);
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  

  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" btn-warning", "");
  }
  x[slideIndex-1].style.display = "block";  
     console.log("x Array:"+x[slideIndex-1].style.display);
  dots[slideIndex-1].className += " ";

}

});