for循环内动态创建的按钮上的addEventListener问题

Question

I made some elements in JavaScript that i add to the website. When i add an eventlistener to the button, only the first button works and runs the function.

I used to do this before and worked fine, any idea what i'm doing here wrong?

my javascript function:

 function laadProjectDetails(){ fetch("restservices/projectdetails") .then(response => response.json()) .then(function(myJson) { for (const object of myJson) { var projextX = '<div class="row"><div class="cause content-box"><div class="col-md-5 col-sm-6"><div class="img-wrapper"><div class="overlay"></div><img class="img-responsive" src="assets/img/causes/img-1.jpg" alt=""></div></div><div class="col-md-7 col-sm-6"><div class="info-block"><h4><a href="#">'+object.projectNaam+'</a></h4><p>'+ object.projectBeschrijving +'</p><div class="foundings"><div class="progress-bar-wrapper min"><div class="progress-bar-outer"><p class="values"><span class="value one">Opgehaald: XXXX</span>-<span class="value two">Doel: €'+object.totaalBedrag+'</span></p><div class="progress-bar-inner"><div class="progress-bar"><span data-percent="55"><span class="pretng">55%</span> </span></div></div></div></div></div><div class="donet_btn"><input id="'+object.projectID+'" type="submit" value="Doneer" class="btn btn-min btn-solid"></input></div></div></div></div></div>'; document.querySelector("#showProject").innerHTML += projextX; var valueVerwijder = document.querySelector("div.donet_btn input[value='Doneer']"); valueVerwijder.addEventListener("click", doneerFunc); } }); } laadProjectDetails(); function doneerFunc(){ console.log("test"); } 

Answer 1

You are adding event listener to the first matching selector. Try to do:

var valueVerwijder = document.getElementById(object.projectID);
valueVerwijder.addEventListener("click", doneerFunc);

Assuming object.projectID has a unique ID

Answer 2

From querySelector documentation :

Return value

A Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

You're adding event listener only to first button that matches selector. Instead, you could use element id:

function laadProjectDetails(){
    fetch("restservices/projectdetails")
    .then(response => response.json())
    .then(function(myJson) {
        for (const object of myJson) {
            var projextX = '<div class="row"><div class="cause content-box"><div class="col-md-5 col-sm-6"><div class="img-wrapper"><div class="overlay"></div><img class="img-responsive" src="assets/img/causes/img-1.jpg" alt=""></div></div><div class="col-md-7 col-sm-6"><div class="info-block"><h4><a href="#">'+object.projectNaam+'</a></h4><p>'+ object.projectBeschrijving +'</p><div class="foundings"><div class="progress-bar-wrapper min"><div class="progress-bar-outer"><p class="values"><span class="value one">Opgehaald: XXXX</span>-<span class="value two">Doel: €'+object.totaalBedrag+'</span></p><div class="progress-bar-inner"><div class="progress-bar"><span data-percent="55"><span class="pretng">55%</span> </span></div></div></div></div></div><div class="donet_btn"><input id="'+object.projectID+'" type="submit" value="Doneer" class="btn btn-min btn-solid"></input></div></div></div></div></div>';          
            document.querySelector("#showProject").innerHTML += projextX;


            var valueVerwijder = document.getElementById(object.projectID);
            valueVerwijder.addEventListener("click", doneerFunc);

        }

    });
}

laadProjectDetails();

function doneerFunc(){
    console.log("test");
}