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