Custom Confirm Function in JavaScript

Question

This is my function which creates a confirmation box.

I want the function to return true/false based on the two onclick functions inside it.
But the function does not wait for the clicks.

So, what can I do?

function Confirmation(title, message, confirm_button_value) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {
      var confirmation;

      var confirmation_box = document.createElement("div");
      confirmation_box.classList.add("confirmation_box");

      var title_container = document.createElement("div");
      title_container.classList.add("confirmation_box_title");
      title_container.innerHTML = title;
      confirmation_box.append(title_container);

      var message_container = document.createElement("div");
      message_container.classList.add("confirmation_box_message");
      message_container.innerHTML = message;
      confirmation_box.append(message_container);

      var buttons_container = document.createElement("div");
      buttons_container.classList.add("confirmation_box_buttons");

      var confirm_button = document.createElement("span");
      confirm_button.classList.add("confirmation_box_confirm_button");
      confirm_button.innerHTML = confirm_button_value;
      buttons_container.append(confirm_button);

      var cancel_button = document.createElement("span");
      cancel_button.classList.add("confirmation_box_cancel_button");
      cancel_button.innerHTML = "Cancel";
      buttons_container.append(cancel_button);

      confirmation_box.append(buttons_container);

      document.body.append(confirmation_box);

      confirm_button.onclick = function () {
        confirmation = true;
      };

      cancel_button.onclick = function () {
        confirmation = false;
      };

      return confirmation;
    }
  }
}

(I prefer vanilla solutions.)

Answer 1

There are 3 ways to solve this

regular callback method

function Confirmation(title, message, confirm_button_value, callback) {
    if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
        if (title !== "" || message !== "" || confirm_button_value !== "") {
            
            // removed for brevity
            
            confirm_button.onclick = function () {
                callback(true);
            };

            cancel_button.onclick = function () {
                callback(false);
            };
            return; // important this is here - so we don't throw the bad arguments error
        }
    }
    throw "Bad arguments";
}

usage

try {
    Confirmation("title", "message", "button value", function(result) {
        // handle the selection here
    });
} catch(err) {
    // handle errors here
}

---

or using Promises, which are just glorified callbacks anyway, so, either method means you're using a callback

function Confirmation(title, message, confirm_button_value) {
    return new Promise((resolve, reject) => {
        if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
            if (title !== "" || message !== "" || confirm_button_value !== "") {
                
                // removed for brevity
                
                confirm_button.onclick = function () {
                    resolve(true);
                };

                cancel_button.onclick = function () {
                    resolve(false);
                };
                return; // important this is here!!!
            }
        }
        reject("bad arguments");
    });
}

usage

Confirmation("title", "message", "button value")
    .then(result => {
        // handle the selection here
    })
    .catch(err => {
        // handle your error here
    })

---

or with async/await - which is just syntax sugar for Promises, but makes the code easier for people struggling with Promises/callbacks
It isn't magic, it's just sugar

The confirmation function is unchanged from the Promise version - the usage is altered though

usage - will only work inside of an async function, or top level of a module in modern browsers

try {
    const result = await Confirmation("title", "message", "button value");
    // handle result here
} catch(err) {
    // handle errors here
}