Home»Blog»How to Create a Yes/No Confirmation Box in JavaScript

How to Create a Yes/No Confirmation Box in JavaScript

Updated onFeb 11, 2022byAlan Morel

#javascript

How to Create a Yes/No Confirmation Box in JavaScript

confirm()
Conclusion

Sometimes, you just want an easy way to get a yes or no response from the user in the browser.

In this post, we'll be learning how to create a yes/no confirmation box in JavaScript to get that response from the user.

confirm()

The best way to create a yes/no confirmation box is to use the JavaScript confirm() function. This function will make the browser render a dialog box with a message and two buttons, an Ok and a Cancel button.

When the user interacts with this dialog box, it will return to you a boolean, true if the user clicked the Ok button and false if the user clicked the Cancel button.

Here's how to create a confirmation box using confirm():

JAVASCRIPT
const response = confirm("Are you sure you want to do that?");

console.log(response);

Here's how the code above would look in the browser:

Confirmation box in the browser

This is how a full HTML page using this code would look like:

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Yes/No Confirmation box</title>
        <script>
            const confirmAction = () => {
                const response = confirm("Are you sure you want to do that?");

                if (response) {
                    alert("Ok was pressed");
                } else {
                    alert("Cancel was pressed");
                }
            }
        </script>
    </head>
    <body>
        <button onclick="confirmAction()">
            Perform action
        </button>
    </body>
</html>

As a recap, after you get the response from the user, you can do something with it:

JAVASCRIPT
const response = confirm("Are you sure you want to do that?");

if (response) {
    // add code if the user pressed the Ok button
    console.log("Ok was pressed");
} else {
    // add code if the user pressed the Cancel button
    console.log("Cancel was pressed");
}