Await/Async is not waiting for promise

Question

I have a function that creates a button with the name of a fruit from an array. I need to use async/await to run that function from another one. Here is my current code:

    var createButton = function(fruit) {

    var page = document.getElementById("divPage");
    var table = document.createElement("table");
    page.appendChild(table);
    var r = t.insertRow(-1);
    var c = r.insertCell(-1);
    var button = document.createElement("input");
    button.type = "button";
    button.value = fruit;
    button.addEventListener("click" , function(){return true;});
    c.appendChild(button);


}


var run = async function() {

    var listOfFruits = ["apple" , "orange", "banana"];
    for (var i = 0; i < listOfFruits.length; i++) {

         await createButton(listOfFruits[i]);

    }



}

When I ran this code, I get a page with a button with the value of "banana". The "for" loop ran the function 3 times without waiting for the return created by clicking the button. How do I make the "for" loop wait for the user to click the button before going to the next element of the array?

Thank you for your time.

The function called `createButton` does not return a `Promise` in your code. — norbitrial, Feb 13 '20 at 20:53
`button.addEventListener("click"` takes a callback, wrap that callback into a Promise, then you can await it. — Jonas Wilms, Feb 13 '20 at 20:54

Await/Async is not waiting for promise

0 Answers0