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

CertainPerformance · Accepted Answer · 2021-08-29 02:14:09Z

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';
    });
}

answered Aug 29, 2021 at 2:14

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PYP Over a year ago

Exactly what I was looking for, thanks! Actually I had already tried the first solution and couldn't understand why it wasn't working, but seems it was due to using var instead or let. Thanks again!

PYP Over a year ago

Hi I have a follow up question on this. Although the above answer works well per my original query, I've found that as I'm also using Mongoose pagination, it only appears to work on page 1 of the pagination (first 20 records). Once I move to page 2 (next 20 records), the onclick function is no longer working. Is there a way to ensure the function continues to works with all records?

CertainPerformance Over a year ago

Use event delegation instead. Add a single listener to the container, and when it's clicked, find the .closest('.square-box-container'). If it exists, find the descendant .image-overlay and toggle it.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related