Interaction: alert, prompt, confirm

The browser is your playground for the next few lessons, so you need a quick way for a script to talk to a person and hear something back. Three built-in functions do exactly that: alert puts a message on screen, prompt asks for a line of text, and confirm asks a yes/no question. They are crude and you will replace them with real UI later, but they take zero setup, which makes them perfect for experiments.

All three share one defining trait: they are modal. The moment one appears, the page underneath goes cold — no clicking links, no scrolling, no other scripts advancing — until the person deals with the dialog. Keep that picture in mind; it explains most of their behavior.

the page — links, buttons, scroll, timers… all frozen

▸ nav ▸ content ▸ footer

Hello

A modal dialog freezes everything behind it until dismissed

alert

You have met this one already. It shows a message and waits for the person to click “OK”. Nothing more.

alert("Hello");

The little box that pops up is a modal window. “Modal” is the key word: while it sits there, the rest of the page is untouchable. The visitor cannot press other buttons or interact with anything else until they dismiss it — here, until they click “OK”.

Because alert only speaks and never listens, it is your go-to for a fast “did this line run?” check while learning. In production it is jarring, so you will reach for console.log or real notifications instead — but for now it earns its keep.

prompt

prompt asks the visitor to type something. It takes two arguments:

result = prompt(title, [default]);

On screen you get a modal with your message, a text input, and two buttons: OK and Cancel.

title: The text shown to the visitor — the question or instruction.

default: An optional second argument: the value the input box starts with.

Here is the part that trips people up: what you get back depends on which button ends the dialog.

Type something and click OK → you get that text as a string.
Click Cancel, or press Esc → you get null.

So the return value is either the entered string or null. That distinction matters, because null and an empty string are different things — an empty string means “they clicked OK without typing anything,” while null means “they backed out.”

How many cups of coffee today?

Cancel

OK →“2”(a string)

Cancel / Esc →null

prompt's two exits produce two different return values

A full example:

let cups = prompt('How many cups of coffee today?', 2);

alert(`You drank ${cups} cups!`); // You drank 2 cups!

Old Internet Explorer: always pass a default

The second argument is optional, but leaving it out has an ugly side effect in Internet Explorer: it drops the literal text "undefined" into the input box.

Run this in IE to see it:

let test = prompt("Test");

To keep prompts clean there, pass an empty string as the default:

let test = prompt("Test", ''); // '' guards against IE's "undefined"

Modern browsers do not have this quirk, but the empty-string habit is harmless and future-proof.

confirm

confirm asks a yes/no question. Its syntax is a single argument:

result = confirm(question);

It shows a modal with your question and two buttons, OK and Cancel. The return value is a boolean:

OK → true
Cancel or Esc → false

let wantsCoffee = confirm("Add a coffee to your order?");

alert( wantsCoffee ); // true if OK is pressed

Because it hands back a clean true/false, confirm slots straight into an if:

if (confirm("Delete this item?")) {
  // runs only when they clicked OK
}

Add a coffee to your order?

Cancel

OK → true

Cancel / Esc → false

confirm maps two buttons onto two boolean values

Summary

Three browser-specific functions let a script interact with a visitor, and the thing to remember about each is what it gives back.

alert: Shows a message. Returns nothing useful (undefined).

prompt: Shows a message with a text box. Returns the typed text as a string, or null if the visitor clicks Cancel or presses Esc.

confirm: Shows a message with OK/Cancel. Returns true for OK and false for Cancel or Esc.

Function	Asks for	Returns on OK	Returns on Cancel/Esc
alert	nothing	undefined	—
prompt	a line of text	“the text”	null
confirm	yes / no	true	false

Same shape, three different return contracts

Every one of these is modal: it pauses your script cold and blocks all interaction with the page until the visitor dismisses it. That pause is a feature when you are learning — execution literally waits on the line where you call the function — but a nuisance in a real app, where a frozen page feels broken.

Two limits apply to all three:

Position is the browser’s call. You cannot choose where the box appears; it is usually centered.
Appearance is the browser’s call too. The fonts, colors, and button styles are fixed. You cannot restyle them.

That rigidity is the trade for how little effort they cost. When you need dialogs that match your design or offer richer interaction, you will build them yourself out of regular page elements. Until the polish matters, these three do the job.