Why do my submit buttons lose their functionality after a new child is added to the DOM

Question

within my JavaScript code I am creating html children elements using JS text literals and am incrementing them into an HTML container. I am also incrementing their classes with a JS variable. Once they are added into the DOM, I would like for them all to have functionality. Here's where there is a problem. Each of my children's submit button will work as soon as its created, but if I add another child to the container before I click in a value for the last button it wont work. Any advice or help is appreciated. Thank you.

HTML below

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Order Divs</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="number" id="point-input">
  <button id="sub-btn">Submit</button>
   <!--8 <button id="add-btn">Add</button>-->
    <div id="container"></div>
    <script src="main.js"></script>
</body>
</html>

**Javascipt Below **


//variables below

let addBtn=document.getElementById("add-btn")
console.log(addBtn)

const container=document.getElementById("container")
console.log(container)

let numInc=1;

let numArr=[]

let subBtn=document.getElementById("sub-btn")
console.log(subBtn)

let pointInput=document.getElementById("point-input")
console.log(pointInput)

                                                //adding an event listener to the submit button below 

subBtn.addEventListener("click",()=>{
                                                    //Adding html literals on the onclick   below

        container.innerHTML+=
        `<span class="child${numInc}">
        <div class="numbers${numInc}"></div>
                <div class="name-display${numInc}"></div>
                    <input class="name-input${numInc}">
                    <button class="name-sub-btn${numInc}">Submit</button>

        </span>`
                                            
                                console.log(`child${numInc}`)   
                                empty()


                                                    // Name variables per constainer

                                let child=document.querySelector(`.child${numInc}`)
                                console.log(child)

                                let nameDisplay=document.querySelector(`.name-display${numInc}`)
                                console.log(nameDisplay)


                                let nameSubBtn=document.querySelector(`.name-sub-btn${numInc}`)
                                console.log(nameSubBtn);

                                let nameInput=document.querySelector(`.name-input${numInc}`)
                                console.log(nameInput);


                            child.querySelector(`.name-sub-btn${numInc}`).addEventListener("click",()=>{
                                nameDisplay.innerText=nameInput.value;
                            })
                        

numInc=numInc+1;

})//end of sub-btn eventlistener


function empty(){
    document.getElementById("point-input").value="";    // empty the input field after a submit
}

CSS below


#container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:hsl(0,100%,80%);

}
.child{
    padding:10px; 
    background:hsl(180,100%,70%); 
    border:solid black 3px; 
    /*margin:10px;
    width:3em;*/
    text-align:center;
}

.child1{
    background: hsl(60,100%,230%);
}

Why do my submit buttons lose their functionality after a new child is added to the DOM

0 Answers0