confirm()
lets us ask confirmation before performing something.
This API dates back to the dawn of the Web, and is supported by every browser.
It's very simple and I think it might come handy in many different cases without reaching for a custom-built UI.
Here's how it works: you call confirm()
, passing a string that represents the thing we want to confirm, which is shown to the user:
confirm("Are you sure you want to delete this element?")
This is how it looks in Chrome:
This is in Safari:
This is in Firefox:
As you can see it's rendered slightly differently in each browser, but the concept is the same.
You should call
window.confirm()
, but sincewindow
is implicit,confirm()
works
The browser blocks the script execution until the user clicks any of the OK or Cancel button. You can't escape from that without clicking a button.
The call to confirm()
returns a boolean value that's either true
, if the user clicks OK, or false
if the user clicks Cancel, so we can assign it to a variable, or also use it in a conditional:
const confirmed = confirm("Are you sure you want to delete this element?")
if (confirm("Are you sure you want to delete this element?")) {
console.log('confirmed')
}