Updating a variable that holds number of “divs” when a new div gets added

As the title reads, is there a way to update the variable (which links to how many divs there is in a parent)? The code I have works, but I was looking for another way… The code I have:

function addDiv() {
//adds a div into the parent
}

parent.addEventListener("mouseover", ()=>{
    getAllLists = parent.querySelectorAll(".list-name-tile")
    getAllLists.forEach(list => {
        list.addEventListener("click", ()=>{
           //other code
        })
    });
})

In my code, I used “mouseover” to update getAllLists; I was just wondering if there was another way to do this and achieve a similar effect or is this the way to it best? Please ask me to clarify or if you need additional information.

Thank you!

Answer

Retrieving the div elements in the mouseover event listener is ok in my opinion.

However, there is a problem in your code. Each time you hover over the parent element, the click eventlistener is attached to the child elemens over and over again. You can try this by inserting a console.log() in the click event handler. Hover over the parent element a few times and then click on a child element. You will see the output of the console.log a few times.

This is because the clicker event listener is attached everytime you hover over the parent element.

Possible solution

As far I understand your question you would like to add a click eventlistener to all child element (even the ones which are added dynamically). If thats the case you can make usage of Event Delegation.

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you select any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember, bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element’s parent, etc.

A good example is a series of list items — if you want each one to pop up a message when selected, you can set the click event listener on the parent , and events will bubble from the list items to the .

Event bubbling and capture (scroll down to the section “Event delegation”)

Via Event Delegation you can do it this way:

HTML

<div id="parent">
    <div class="list-name-tile">First div</div>
    <div class="list-name-tile">Second div</div>
</div>

JavaScript

const parent = document.getElementById("parent");

parent.addEventListener("click", e => {
    if (e.target.classList.contains("list-name-tile")) {
        // Do stuff
    }
});

function addDiv() {
    const div = document.createElement("div");
    div.classList.add("list-name-tile");
    div.textContent = "Next div";
    parent.appendChild(div);
}

addDiv();

In the example I have attached a click event listener to the parent element. So whenever you click on a child element the event is “bubbling” to the next ancestor which is your parent element. There we have the event listener and can handle it. In the example I have filtered it to only do something when the element, which has triggered the event, has a specific class. You can also filter for specific events and so on.