User Interaction
alert, prompt, confirm — the simplest ways to communicate with users.
Overview
Three built-in methods for simple user communication.
JavaScript provides three built-in methods for interacting with users through browser dialogs. These are modal windows — they pause script execution until the user responds.
💬
alert()
Show a message
✏️
prompt()
Get text input
❓
confirm()
Yes/No question
All three are methods of the window object. They block all JavaScript execution until the user dismisses the dialog.
alert()
Display a message to the user. Simplest form of output.
// Basic usage:
alert("Hello, World!");
// With variables:
let name = "John";
alert("Welcome, " + name + "!");
// With template literals:
alert(`You have ${3} new messages`);
// Any value is converted to string:
alert(42); // shows "42"
alert(true); // shows "true"
alert([1, 2, 3]); // shows "1,2,3"💡 alert() returns undefined. It only displays information — you can't get data back from it.
prompt()
Ask the user for text input. Returns a string or null.
// Basic usage:
let name = prompt("What is your name?");
// User types "John" → name = "John"
// User clicks Cancel → name = null
// With default value:
let age = prompt("Your age?", "25");
// Input field shows "25" pre-filled
// Return value is ALWAYS a string (or null):
let num = prompt("Enter a number:");
console.log(typeof num); // "string" ← always!
// Convert to number:
let score = Number(prompt("Score:"));
// or: +prompt("Score:")confirm()
Ask a yes/no question. Returns true or false.
// Basic usage:
let agreed = confirm("Do you agree to the terms?");
if (agreed) {
console.log("User agreed!");
} else {
console.log("User declined.");
}
// Common patterns:
let shouldDelete = confirm("Delete this item?");
if (shouldDelete) {
deleteItem();
}
// One-liner:
confirm("Continue?") && doSomething();Limitations
Why these methods are rarely used in production.
Blocks execution
All JavaScript pauses until the user responds. No animations, no async operations.
No styling control
You cannot customize the appearance. Each browser shows its own native dialog style.
Fixed position
The dialog appears at a browser-determined location. You can't position it.
Poor mobile UX
On mobile devices, these dialogs are particularly jarring and disruptive.
Can be suppressed
Browsers allow users to block repeated dialogs, breaking your app logic.
No HTML content
You can only display plain text. No formatting, images, or custom buttons.
💡 These methods are fine for learning and quick debugging. For real applications, use custom modals or form elements.
Modern Alternatives
What to use in real applications instead.
| Instead of | Use |
|---|---|
| alert() | Toast notifications, custom modals |
| prompt() | <input> elements, form modals |
| confirm() | Confirmation modals with custom buttons |
// Modern alternative: HTML dialog element
const dialog = document.querySelector("dialog");
// Show modal
dialog.showModal();
// Close
dialog.close();
// With form:
// <dialog>
// <form method="dialog">
// <p>Are you sure?</p>
// <button value="yes">Yes</button>
// <button value="no">No</button>
// </form>
// </dialog>// console.log for debugging (instead of alert)
console.log("Debug:", variable);
console.table(arrayOfObjects);
console.warn("Warning message");
console.error("Error occurred");Frequently Asked Questions
Common questions about user interaction methods.