How to update my elements after adding an element in javascript?

Question

After reading the title, you might have known the problem. Let me elaborate: when I add an element using JavaScript, I can't do anything with that element. When the element is clicked, the element is supposed to do a certain function, but when I add the new element, just does nothing.

Code:

    <div class="progress-bar">
        <div class="progress-bar-title">Progress:</div>
        <div class="progress-bar-outline">
            <div class="progress-bar-percentage"></div>
        </div>
    </div>
    <div class="list" id="listSection">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>test</li>
        </ul>
    </div>

    <div class="new-button">Create</div>
    <div class="new-section">
        <input type="text" class="text-box" placeholder="Name for this card">
    </div>

//creates a new element
newText.addEventListener("keyup", (event) => {
    if (newText.value != "") {
        if (event.keyCode === 13) {
            let list_section = document.getElementById("listSection");
            let name = newText.value;

            let new_li = document.createElement("li");
            new_li.innerHTML = name;

            list_section.querySelector("ul").appendChild(new_li);

            let divs = document.querySelectorAll("div");
            newSection.classList.remove("opened");

            divs.forEach((div) => {
                if (div != newSection) {
                    div.style.transition = "all 0.5s ease";
                    div.style.filter = "";
                }
            });
        }
    }
});

//looping through each list to add that function
list_Sections.forEach((list) => {
    totalListCount++;
    list.addEventListener("click", () => {
        list.classList.toggle("checked"); //this function doesn't apply to the newly created element

        if (!list.classList.contains("checked")) {
            listCompleted--;
        } else {
            listCompleted++;
        }

        average = (listCompleted / totalListCount) * 500;
        percentage.style.width = average;
    });
});

Ask you have any questions about this topic.

Thanks for the help!

Event listeners only apply to elements you've added them to. You have to add the event listener to the newly created element at creation time. See https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — kmoser, Dec 27 '20 at 03:21

Harshana Serasinghe · Answer 1 · 2020-12-27T03:36:49.787

Whenever a new element is added, your code should attach the event listener to that new element. Try nesting your the code related to .addEventListner() inside the keyup event listener code.

newText.addEventListener("keyup", (event) => {
    if (newText.value != "") {
        if (event.keyCode === 13) {
            let list_section = document.getElementById("listSection");
            let name = newText.value;

            let new_li = document.createElement("li");
            new_li.innerHTML = name;

            list_section.querySelector("ul").appendChild(new_li);

            let divs = document.querySelectorAll("div");
            newSection.classList.remove("opened");

            divs.forEach((div) => {
                if (div != newSection) {
                    div.style.transition = "all 0.5s ease";
                    div.style.filter = "";
                }
            });

            //looping through each list to add that function
            list_Sections.forEach((list) => {
                totalListCount++;
                list.addEventListener("click", () => {
                    list.classList.toggle("checked"); 

                    if (!list.classList.contains("checked")) {
                        listCompleted--;
                    } else {
                        listCompleted++;
                    }

                    average = (listCompleted / totalListCount) * 500;
                    percentage.style.width = average;
                });
            });
        }
    }
});

the old elements fails at achieving the functions – Overdrive Dec 27 '20 at 03:54 — Overdrive, Dec 27 '20 at 03:54

How to update my elements after adding an element in javascript?

1 Answers1