Getting Input

Getting input from users is what makes your programs interactive. In the browser environment, one of the simplest ways to ask for input is using the prompt() method.

The prompt() method instructs the browser to display a dialog with an optional message prompting the user to input some text. It halts the execution of your program until the user either submits the text or cancels the dialog.

Asking for User Input

You can pass a message to prompt() to tell the user what you want them to type. If the user clicks “Cancel”, it returns null.

One thing to know before you run anything on this page: prompt() belongs to the browser window, and the sandbox these examples execute in has no window to open a dialog in. So each example below begins by defining its own stand-in prompt that returns a fixed answer, letting you see exactly what your code does with each possible reply without a dialog interrupting. Delete that first line when you copy this into a real page — there, the browser supplies the real prompt and a box appears.

const prompt = (msg, def) => null;   // stand-in: pretends the user pressed Cancel
let sign = prompt("What's your sign?");
console.log(sign);

null

You can even leave out the message entirely if there is nothing to show in the prompt window.

const prompt = (msg, def) => null;   // stand-in: pretends the user pressed Cancel
let value = prompt();
console.log(value);

null

Handling the Return Value

When the user enters text and clicks “OK”, prompt() returns a string containing the text entered by the user. If they cancel, it returns null. This is a great place to use an if/else statement.

Step through the execution below to see how the logic branches:

const prompt = (msg, def) => def;    // stand-in: pretends the user accepted the default
let name = prompt("Enter name", "John");
if (name === null) {
  console.log("Canceled");
} else {
  console.log("Hello " + name);
}

You can also provide a default value that will be pre-filled in the text input field:

const prompt = (msg, def) => def;    // stand-in: pretends the user accepted the default
let color = prompt("Favorite color?", "blue");
console.log(color);

blue

Common Misconceptions

One of the biggest traps for beginners is assuming that if a user types numbers into a prompt, JavaScript will treat it as a number.

const prompt = (msg, def) => def;    // stand-in: pretends the user accepted the default
let age = prompt("Age?", "42");
console.log(typeof age);

string

The return value is always a string, even if the user enters a number. If you need to do math with the input, you must explicitly convert it using a function like Number().

Another thing to watch out for is when the user submits the prompt without typing anything at all:

const prompt = (msg, def) => def;    // stand-in: pretends the user accepted the default
let text = prompt("Enter text", "");
console.log(text === "");

true

Clicking OK with an empty input field returns an empty string "", which is different from clicking Cancel (null).

Edge Cases

• Null Returns: Be sure to always handle the null case. Trying to treat null as a string (like calling a string method on it) will crash your program.
• Empty Strings: A user can submit the prompt empty, resulting in an empty string "" instead of null.