javascript

confirm() method

Learn the JavaScript confirm() method. Understand how to use this browser feature to ask users for a yes/no answer and get back true or false for their choice.

9 min read 8 sections Tutorial
Share

The `confirm()` method in JavaScript shows a small pop-up box to the user. This box asks a question and gives two buttons: "OK" and "Cancel". It is a simple way to get a yes or no answer from someone using your website.

The confirm() Method

The confirm() Method

The confirm() method makes a special pop-up box appear in the user's web browser. This box is called a modal dialog. A modal dialog means that the user cannot click on anything else on the webpage until they close the pop-up.

This method is perfect for asking a simple yes or no question. For example, you might ask "Are you sure you want to delete this item?" The user then clicks either "OK" or "Cancel" to respond.

What is confirm()?

The confirm() method displays a modal dialog box with a specified message, an "OK" button, and a "Cancel" button. It returns true if the user clicks "OK" and false if the user clicks "Cancel".

User Input

Gets a simple 'yes' or 'no' response from the user through a pop-up box.

Blocking

Stops your JavaScript code from running until the user clicks a button.

Return Value

Returns a boolean value: true for OK, false for Cancel.

Browser Feature

It is a built-in browser pop-up, so you cannot change its look or styling.

How to Use confirm()

Getting Started

How to Use confirm()

Using confirm() is very easy. You just call the method and pass it a text message inside parentheses. This message is what the user will see in the pop-up box.

When the pop-up appears, your JavaScript code will pause. It waits for the user to make a choice. After the user clicks "OK" or "Cancel", the code continues running.

JS · Browser
1// Call confirm() with a question for the user
2const userChoice = confirm("Do you want to continue?");
3

4// userChoice will be true if OK was clicked, false if Cancel was clicked
5

6// We can then use an if statement to react to their choice
7if (userChoice) {
8  console.log("User clicked OK. Continuing...");
9} else {
10  console.log("User clicked Cancel. Stopping...");
11}

confirm() blocks your code!

When confirm() shows its pop-up, all other JavaScript code on the page stops. It will not run until the user clicks either "OK" or "Cancel". This is important to remember because it can make your website feel slow if you use confirm() too often.

Understanding the Return Value

Understanding the Return Value

The most important part of confirm() is the value it gives back. This is called the return value. The confirm() method always returns a special type of value called a boolean.

A boolean can only be one of two things: true or false. If the user clicks "OK", confirm() returns true. If the user clicks "Cancel", it returns false. You can store this boolean value in a variable and then use it to decide what your program should do next.

JS · Browser
1// Ask the user if they want to delete an item
2const wantsToDelete = confirm("Are you sure you want to delete this item?");
3

4// Check the value of 'wantsToDelete'
5if (wantsToDelete) {
6  // If true, the user clicked OK
7  console.log("Item deleted successfully!");
8  // Here you would add code to actually delete the item
9} else {
10  // If false, the user clicked Cancel
11  console.log("Deletion cancelled.");
12  // Here you would add code to do nothing, or show a message
13}
✗ BadWrong — not checking the return value
confirm("Save changes?");
// Code here will run immediately after the dialog closes,
// regardless of user's choice. This is usually not what you want.
console.log("Changes saved!"); // This always runs!
✓ GoodCorrect — checking the return value
const confirmed = confirm("Save changes?");
if (confirmed) {
  // This code only runs if the user clicked OK
  console.log("Changes saved!");
} else {
  // This code only runs if the user clicked Cancel
  console.log("Changes not saved.");
}

Customizing the Message

Customizing the Message

The message you pass to confirm() is the only thing you can change about the pop-up box. It should be a clear and concise question or statement that helps the user understand what they are being asked.

You can use plain text or even combine text with variables to make the message more dynamic. Remember that the message should fit well into a small pop-up window.

Simple Message
// A basic, static message
confirm("Are you sure?");
VS
Dynamic Message with Variables
// A message that includes information from a variable
const itemName = "My Document";
confirm("Do you really want to delete " + itemName + "?");

Make your message clear and specific

Always make your confirm() message very clear. Instead of just "Are you sure?", say "Are you sure you want to log out?" or "Confirm deletion of user Alice?". This helps the user understand the choice they are making.

Using confirm() in Real Projects

Using confirm() in Real Projects

The confirm() method is often used for actions that cannot be easily undone. For example, deleting data, logging out, or leaving a page with unsaved changes. It adds a small safety step before a user takes a critical action.

Let's look at a common scenario: confirming a user wants to delete something from a list.

1

Get the item to delete

First, your code needs to know which item the user wants to remove. This might happen when they click a 'Delete' button next to an item.

javascript
1const itemId = 'item-123'; // Imagine this comes from a button click
2const itemName = 'Product A';
2

Ask for confirmation

Use confirm() to show a pop-up asking the user if they are sure they want to delete the specific item.

javascript
1const isConfirmed = confirm(`Are you sure you want to delete ${itemName}?`);
3

Perform action based on choice

If isConfirmed is true, proceed with the deletion. Otherwise, do nothing.

javascript
1if (isConfirmed) {
2  console.log(`Deleting item with ID: ${itemId}`);
3  // In a real app, you would send a request to a server to delete it
4  alert(`${itemName} has been deleted.`);
5} else {
6  console.log(`Deletion of ${itemName} cancelled.`);
7  alert(`Deletion cancelled for ${itemName}.`);
8}

Do not overuse confirm()

Using confirm() too often can annoy users. Imagine a website where every single click brings up a pop-up. Only use confirm() for actions that are important, destructive, or irreversible. For minor actions, a different kind of feedback (like a small success message) is better.

confirm() Method Reference

confirm() Method Reference

ParameterDescriptionTypeRequired
messageThe text to display in the confirmation dialog.StringYes
Return ValueDescription
trueIf the user clicks the "OK" button.
falseIf the user clicks the "Cancel" button.

Test Your Knowledge

Test Your Knowledge

Test Your Knowledge

Quick Check

What value does confirm() return if the user clicks 'OK'?

Quick Check

Which statement best describes the behavior of confirm()?

Quick Check

What is the only customizable part of the confirm() dialog?

Quick Check

Consider this code: const result = confirm("Proceed?"); if (result) { console.log("Action taken"); } else { console.log("Action cancelled"); } If the user clicks 'Cancel', what will be printed to the console?

Quick Reference

Quick Reference

Quick Reference

Pro Tips
  • 1Purpose — confirm() asks the user a yes/no question via a browser pop-up.
  • 2Syntax — confirm("Your message here?"); where the message is a string.
  • 3Return Value — Returns true if user clicks "OK", false if user clicks "Cancel".
  • 4Blocking — Halts JavaScript execution until the user interacts with the dialog.
  • 5Browser-Native — The dialog's appearance and button text cannot be styled or changed.
  • 6Use Cases — Ideal for critical actions like deleting data, logging out, or unsaved changes.
  • 7Avoid Overuse — Too many confirm() dialogs can frustrate users.
  • 8Clear Messages — Make your message specific and easy for the user to understand.
  • 9Alternative — For custom styling or more complex input, build your own HTML/CSS/JS modal.
  • 10Closing Behavior — Closing the dialog via the browser's 'X' button usually returns false.

alert() method

Learn about the alert() method for simple, unconfirmable messages to the user.

prompt() method

Discover the prompt() method for getting text input from the user via a pop-up.

Custom Modals

Explore how to create your own fully customizable pop-up windows using HTML, CSS, and JavaScript.

Event Listeners

Understand how to react to user clicks and other interactions on your webpage elements.

You've mastered confirm()!

You now know how to use the confirm() method to get simple yes/no answers from your website users. You understand its return value, its blocking behavior, and when it's best to use it. This is a vital tool for adding interactive safety checks to your web applications!

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler
Continue Learning
PreviousNext