Accessing child elements in Javascript array via onclick (for loop)

Question

I am looping through an array like this:

<% thoughts.docs.forEach(function(thought, i) { %>
    <div class="square-box-container">
        <div class="pyp-image-container">
            <div class="image-overlay">

By default, element class name 'image-overlay' is hidden with display: 'none'. I am trying to create a function with an onclick event, so when user clicks on div 'square-box-container', the image overlay for that element only changes to display: 'block'.

Currently I have the below code but I think my inner loop in wrong, as when I click on a square box container, the image overlays for ALL the square box containers change to display: 'block', as opposed to that container overlay only. Can anyone advise what I'm doing wrong please?

  var containerItems = document.getElementsByClassName("square-box-container");
  var overlayItems = document.getElementsByClassName("image-overlay");

  for (var i = 0; i < containerItems.length; i ++) {
      containerItems[i].onclick = function() {
        for (var i = 0; i < overlayItems.length; i ++) {
          overlayItems[i].style.display = 'block';
        }
      }
  }

I'm not very familiar with use of child nodes, is that what is required here? Thanks

Answer 1

If you want only the associated element to have its display changed, don't loop inside the click handler - and use let instead of var.

for (let i = 0; i < containerItems.length; i++) {
    containerItems[i].onclick = function () {
        overlayItems[i].style.display = 'block';
    }
}

Another option is to omit the overlayItems collection entirely, and navigate from the clicked element instead.

for (const container of document.getElementsByClassName("square-box-container")) {
    container.addEventListener('click', (e) => {
        e.currentTarget.querySelector('.image-overlay').style.display = 'block';
    });
}