How can I not count an child block (example .child span) when clicking on a block?

Question

How can I not count a child block (example .child span ) when clicking on a block?

If you click on the block .child it's fine. But if your click hits the block .child span there's an error

 var parent = document.querySelector('.parent'); var childLength = document.querySelectorAll('.child').length; var countClick = 0; parent.onclick = function(event) { var target = event.target; if (target.className == 'child') { target.className = 'child child-click'; setTimeout(function() { target.className = 'child child-hide'; }, 3000); } console.log(countClick); countClick++; if (childLength == countClick) { setTimeout(function() { parent.innerHTML = 'All right'; }, 3000); } } 

 .parent { display: flex; } .child { padding: 15px; background: #ccc; margin: 10px; } .child-click { background: #f00; } .child-hide { display: none; } 

 <div class="parent"> <div class="child"><span>1</span></div> <div class="child"><span>2</span></div> <div class="child"><span>3</span></div> <div class="child"><span>4</span></div> </div> 

Here's my code on JSFiddle .

How can this problem be solved?

Thank you. I will be glad to any help.

Answer 1

Get the closest element which has a .child class with .closest() like so:

var target = event.target.closest('.child');

 var parent = document.querySelector('.parent'); var childLength = document.querySelectorAll('.child').length; var countClick = 0; parent.onclick = function(event) { if(event.target === parent) { console.log("return cause it's the parent"); return; } var target = event.target.closest('.child'); if (target.className == 'child') { target.className = 'child child-click'; setTimeout(function() { target.className = 'child child-hide'; }, 3000); } console.log(countClick); countClick++; if (childLength == countClick) { setTimeout(function() { parent.innerHTML = 'All right'; }, 3000); } } 

 .parent { display: flex; } .child { padding: 15px; background: #ccc; margin: 10px; } .child-click { background: #f00; } .child-hide { display: none; } 

 <div class="parent"> <div class="child"><span>1</span></div> <div class="child"><span>2</span></div> <div class="child"><span>3</span></div> <div class="child"><span>4</span></div> </div> 

is that what you want?

Option 2 Have a look at this. It's another how you could solve your problems with setting the event listener directly to the child elements. Code should be self explanatory but leave a comment if something is not clear.

 var elements = document.querySelectorAll('.child'); var countClick = 0; elements.forEach(function(element){ element.addEventListener('click', function(){ element.classList.add('child-click'); setTimeout(function() { element.classList.add('child-hide'); }, 3000); console.log(countClick); countClick++; if (elements.length == countClick) { setTimeout(function() { element.parentNode.innerHTML = 'All right'; }, 3000); } }); }); 

 .parent { display: flex; } .child { padding: 15px; background: #ccc; margin: 10px; } .child-click { background: #f00; } .child-hide { display: none; } 

 <div class="parent"> <div class="child"><span>1</span></div> <div class="child"><span>2</span></div> <div class="child"><span>3</span></div> <div class="child"><span>4</span></div> </div> 

Answer 2

You can check if the target is span or not. If target is span change the target to it's parent:

 var parent = document.querySelector('.parent'); var childLength = document.querySelectorAll('.child').length; var countClick = 0; parent.onclick = function(event) { var target = event.target; target = target.nodeName == 'SPAN'? target.parentNode : target; if (target.className == 'child') { target.className = 'child child-click'; setTimeout(function() { target.className = 'child child-hide'; }, 3000); } console.log(countClick); countClick++; if (childLength == countClick) { setTimeout(function() { parent.innerHTML = 'All right'; }, 3000); } } 

 .parent { display: flex; } .child { padding: 15px; background: #ccc; margin: 10px; } .child-click { background: #f00; } .child-hide { display: none; } 

 <div class="parent"> <div class="child"><span>1</span></div> <div class="child"><span>2</span></div> <div class="child"><span>3</span></div> <div class="child"><span>4</span></div> </div>