Create Confirmation Alert Box with YES and NO options - JavaScript

In this article, we will see how to create a confirmation box with Yes Or No using JavaScript.

In JavaScript, we can use the confirm() method of the window object to display a dialog / alert box.

The confirm() method is used to display a dialog box with custom text/ message that we can pass as an argument with the method.

Example:

confirm("Your custom message")

The dialog box also provides us with the OK and Cancel buttons. And if the user clicks OK, it will return true, else it will return false if the user clicks Cancel.

Confirmation Box with Ok and Cancel button

Let’s see with an example of how to create a confirmation box using JavaScript:

<body>
  <p>
    click the button to open dialog Box
  </p>
  <button onclick="openDialog()">Click Here</button>
  <script src="main.js"></script>
</body>

In script code:

function openDialog() {
  let customMsg = "Do you want Tea?";

  if (confirm(customMsg)) {
    console.log("User clicked OK");
  } else {
    console.log("User Clicked CANCEL");
  }
}

In the code, we have to use the if…else statement to display some message on our console, depending on the boolean results.

Demo:

Yes/No instead of Ok/Cancel for Confirm in JavaScript

One of the drawbacks with confirm() method is that the dialog box is not a part of the website UI. So we cannot change the OK and Cancel buttons on the confirmation dialog box.

So we have to code our HTML confirmation box with Yes and No buttons and create our own function which will check if a user has clicked the yes button or the No button.

<div>
    <button onclick="showConfirmBox()">Show Dialog</button>
    <div id="confirm-box" hidden>
      <h3>Confirmation</h3>
      <p>Do you really want to reset the database?</p>
      <button onclick="confirm('yes')">Yes</button>
      <button onclick="confirm('no')">No</button>
    </div>
  </div>

Script code:

function showConfirmBox() {
  document.getElementById("confirm-box").hidden = false;
}

function confirm(data) {
  if (data === "yes") {
    console.log(" user clicked yes");
  } else {
    console.log("user clicked No");
  }
}

In the Html code, we have kept the div with id “confirm-box” hidden at first. And when we click the button Show Box, its hidden property is set to true and the confirmation box is displayed on the screen.

The box has a Yes and No button with a click event. When any button is clicked, the confirm() function checks if the user has clicked yes or no, depending on the argument that is passed.

Demo: