javascriptweb-applicationsfrontendweb-frontendconfirm

Custom Confirm Function in JavaScript


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.)


Solution

  • 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
    }