JavaScript Window prompt() Method

What You’ll Learn

The prompt() method shows a dialog with a text field so users can type a short answer. This tutorial covers syntax, return values (string or null), default text, cancel handling, validation loops, and how it fits with alert() and confirm().

Introduction

Sometimes you need a quick piece of text from the user—a name, a nickname, or a search term. The window.prompt() method opens a small dialog with your question, an input box, and OK / Cancel buttons.

Like alert() and confirm(), prompt() is synchronous: JavaScript pauses until the user responds. That makes it easy to learn, but most modern websites use regular HTML form fields or custom modals instead. Still, understanding prompt() helps you read older scripts and grasp how browser dialogs work.

Understanding the prompt() Method

Call prompt(message, defaultValue). The first argument is the question shown above the input. The second argument is optional—when provided, it appears pre-filled in the text field.

When the user clicks OK, the method returns whatever they typed (including an empty string if they cleared the field). When they click Cancel or dismiss the dialog, it returns null. Always check for null before using the result in your app logic.

📝 Syntax

General form of Window.prompt():

const answer = window.prompt(message, defaultValue);
// shorthand (same in browsers):
const answer = prompt(message, defaultValue);

Parameters

• message (optional) — text displayed in the dialog. Non-strings are converted with ToString.
• defaultValue (optional) — initial value in the input field. Omit it for a blank field.

Return value

• string — user clicked OK (may be "" if the field is empty).
• null — user clicked Cancel or dismissed the dialog.

Common patterns

• const name = prompt("Your name?"); if (name !== null) greet(name); — skip work on cancel.
• prompt("City?", "London") — suggest a default the user can edit.
• do { input = prompt("Age?"); } while (input !== null && !isValid(input)); — re-ask until valid or canceled.

Examples Gallery

Each snippet opens a native input dialog. Use the Try-it links to run them behind a button. Dialog text and possible outcomes are shown below as “View Output” for reference.

const userName = prompt("Please enter your name:", "Guest");

if (userName !== null) {
  console.log(`Hello, ${userName}!`);
} else {
  console.log("User canceled the prompt.");
}

Please enter your name: [Guest]

If OK → Hello, Guest! (or whatever they typed)
If Cancel → User canceled the prompt.

const userInput = prompt("Enter something:");

if (userInput === null) {
  console.log("User canceled the prompt.");
} else if (userInput === "") {
  console.log("User clicked OK but left the field empty.");
} else {
  console.log(`User entered: ${userInput}`);
}

Cancel → User canceled the prompt.
OK + empty → User clicked OK but left the field empty.
OK + text → User entered: (their text)

const name = prompt("What is your name?");

if (name !== null && name.trim() !== "") {
  alert(`Nice to meet you, ${name}!`);
} else {
  alert("No name provided.");
}

1. prompt: What is your name?
2. If name given → alert: Nice to meet you, Alex!
   If cancel/blank → alert: No name provided.

let age;

do {
  age = prompt("Please enter your age (positive number):");
  if (age === null) break;
} while (age.trim() === "" || isNaN(Number(age)) || Number(age) <= 0);

if (age !== null) {
  console.log(`Valid age entered: ${age}`);
} else {
  console.log("Prompt canceled.");
}

Invalid input → prompt appears again.
Valid positive number → Valid age entered: 25
Cancel → Prompt canceled.

<button id="colorBtn" type="button">Pick a color</button>
<p id="result"></p>

<script>
  document.getElementById("colorBtn").addEventListener("click", function () {
    const color = prompt("What is your favorite color?", "Blue");
    const el = document.getElementById("result");
    if (color === null) {
      el.textContent = "No color chosen.";
    } else {
      el.textContent = "Your favorite color is: " + color;
    }
  });
</script>

What is your favorite color? [Blue]

If OK → Your favorite color is: Blue
If Cancel → No color chosen.

🚀 Common Use Cases

• Learning exercises — quick scripts that ask for a name or number.
• Simple demos — prototypes before building real form UI.
• Admin tools — internal pages where a plain dialog is acceptable.
• Rename actions — ask for a new file or layer name in a canvas app.
• Search shortcuts — prompt for a query then navigate with the value.
• Debugging helpers — temporary input during development (remove before shipping).

📝 Notes

• prompt() always returns a string or null—never a number. Convert with Number() when needed.
• Some browsers may ignore or restrict dialogs in cross-origin iframes or without user gestures.
• Long or multi-line input is awkward in a prompt; use <textarea> in the page instead.
• Passwords should never be collected with prompt()—use a proper password field.
• The dialog cannot be styled; branding and accessibility are limited compared to HTML modals.
• For production UX, prefer visible form fields users can edit before submitting.

💡 Best Practices