Creating a personalized confirmation function using JavaScript

Question

Creating a personalized confirmation function using JavaScript

Here is a function I've created to generate a confirmation box.

The issue I'm facing is that the function doesn't wait for the user to click before returning true/false based on the onclick events.

So, how can I solve this?


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 am interested in straightforward solutions.)

javascript web-applications frontend web-frontend confirm

Answer 1

Answer №1

There are multiple solutions to this problem

One approach is the traditional 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 !== "") {
            
            // code snippet omitted for brevity
            
            confirm_button.onclick = function () {
                callback(true);
            };

            cancel_button.onclick = function () {
                callback(false);
            };
            return; 
        }
    }
    throw "Bad arguments";
}

example of usage

try {
    Confirmation("title", "message", "button value", function(result) {
        // handle the outcome here
    });
} catch(err) {
    // error handling goes here
}

Another approach involves using Promises, which essentially serve as enhanced callbacks

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 !== "") {
                
                // code snippet omitted for brevity
                
                confirm_button.onclick = function () {
                    resolve(true);
                };

                cancel_button.onclick = function () {
                    resolve(false);
                };
                return; 
            }
        }
        reject("bad arguments");
    });
}

example of usage with Promises

Confirmation("title", "message", "button value")
    .then(result => {
        // handle the outcome here
    })
    .catch(err => {
        // handle any errors here
    })

Alternatively, you can utilize async/await - a more user-friendly syntax built upon Promises

The core confirmation function remains unchanged, only the implementation differs

example of usage - ensure it's within an async function or at the top level of a module

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

Answer 2

There are multiple solutions to this problem

One approach is the traditional 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 !== "") {
            
            // code snippet omitted for brevity
            
            confirm_button.onclick = function () {
                callback(true);
            };

            cancel_button.onclick = function () {
                callback(false);
            };
            return; 
        }
    }
    throw "Bad arguments";
}

example of usage

try {
    Confirmation("title", "message", "button value", function(result) {
        // handle the outcome here
    });
} catch(err) {
    // error handling goes here
}

Another approach involves using Promises, which essentially serve as enhanced callbacks

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 !== "") {
                
                // code snippet omitted for brevity
                
                confirm_button.onclick = function () {
                    resolve(true);
                };

                cancel_button.onclick = function () {
                    resolve(false);
                };
                return; 
            }
        }
        reject("bad arguments");
    });
}

example of usage with Promises

Confirmation("title", "message", "button value")
    .then(result => {
        // handle the outcome here
    })
    .catch(err => {
        // handle any errors here
    })

Alternatively, you can utilize async/await - a more user-friendly syntax built upon Promises

The core confirmation function remains unchanged, only the implementation differs

example of usage - ensure it's within an async function or at the top level of a module

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

Answer 3

Answer №2

Include a callback function in the parameters. Invoke the callback after a user clicks on any button with a specified value.

function UserConfirmation(title, message, confirmText, executeCallback) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirmText !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirmText !== "") {

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

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

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

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

      var confirmButton = document.createElement("span");
      confirmButton.classList.add("confirmation_box_confirm_button");
      confirmButton.innerHTML = confirmText;
      buttonsContainer.append(confirmButton);

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

      confirmationBox.append(buttonsContainer);

      document.body.append(confirmationBox);

      confirmButton.onclick = function () {
        executeCallback(true);
      };

      cancelButton.onclick = function () {
        executeCallback(false);
      };

    }
  }
}

Answer 4

Include a callback function in the parameters. Invoke the callback after a user clicks on any button with a specified value.

function UserConfirmation(title, message, confirmText, executeCallback) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirmText !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirmText !== "") {

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

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

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

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

      var confirmButton = document.createElement("span");
      confirmButton.classList.add("confirmation_box_confirm_button");
      confirmButton.innerHTML = confirmText;
      buttonsContainer.append(confirmButton);

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

      confirmationBox.append(buttonsContainer);

      document.body.append(confirmationBox);

      confirmButton.onclick = function () {
        executeCallback(true);
      };

      cancelButton.onclick = function () {
        executeCallback(false);
      };

    }
  }
}

Creating a personalized confirmation function using JavaScript

Answer №1

Answer №2

Similar questions

Storing JSON data using Vuex

Learn how to implement a captivating animation with JavaScript by utilizing the powerful Raphael Library. Unleash the animation by triggering it with either

Techniques for triggering JavaScript on elements that have been dynamically loaded via Ajax

Having trouble with blurriness in the SVG image loading on three.js

What is the manual way to activate Ratchet's push feature?

Should I return X in async functions, or should I return "Promise.Resolve(X)"?

navigating a collection of objects and retrieving individual property values

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

The error message "node Unable to iterate over property 'forEach' because it is undefined" appeared

The system detected a missing Required MultipartFile parameter in the post request

Is there a way to eliminate the black seam that is visible on my floor mesh that has been separated? I am utilizing A

Is it possible to pass a class method to an onClick event from within the render method in ReactJS?

Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

Node Signature Generation for Gigya Comment Notifications

The component in React does not refresh after updating the state

Routing WebSocket connections with Node.js

Employing passport-steam alongside sails-generate-auth

It seems like KineticJS is removing elements from the canvas that I would prefer to keep

I'm encountering problems when attempting to display the image/png response from an xmlHTTPRequest. Instead of the correct data, I

Tips for comparing and adding a field to a sub-array within an object