Code has been added to clipboard!

prompt

Reading time 3 min
Published Sep 8, 2017
Updated Oct 10, 2019

JavaScript prompt: Main Tips

  • This method is used to display a dialog box, which would require a person to type in input.
  • The JavaScript prompt() method is commonly used for prompting the user for input before entering a web page.

prompt() Function Explained

Developers might be looking for options to include responsive and inviting content on their websites. The JavaScript prompt() method does not require a lot of effort, but you can achieve terrific results by enhancing pages with dialog boxes.

The prompt JavaScript method is applied to display a dialog box, which would stimulate users to respond by providing text input.

The JavaScript prompt box also contains buttons such as OK and CANCEL. The JavaScript prompt() method will return the input value once the user clicks OK. In case CANCEL is clicked, null is returned by the method.

The window.prompt() method is commonly used for prompting the user for input before entering a web page.

The example below assigns the value entered into the prompt and assigns it to a string variable. If you click the Try it Live button, you will see that this code triggers a JavaScript prompt box, asking people to enter their name:

Example
var user = prompt("Enter your name, please:", "Bilbo Baggins");
if (user != null) {
    document.getElementById("greeting").innerHTML = "Greetings, " + user + "!";
}

The following example will use a switch statement to adjust the response of the code to what the user enters into the dialog box:

Example
function mySample() {
 var text;
 var favNumber = prompt("What's your favorite number?", "3");
 switch(favNumber) {
  case "1":
    text = "Well yeah number one !";
    break;
  case "3":
    text = "It's my favorite too!";
    break;
  case "100":
    text = "Wow what a high number!";
    break;
  default:
    text = "I have never heard of that one..";
  }
  document.getElementById("example").innerHTML = text;
}

Note: Once a prompt box appears, the user has to click either OK or Cancel after entering the input. However, do not use this method excessively, as it prevents access to parts of the webpage until submitted, making the user experience less smooth.

Learn Correct Syntax

For the right situations, addition of responsive content can highly improve user experience. However, before you can start manipulating dialog boxes, you should learn how the JavaScript prompt() function is written.

As you can see from the example below, the method accepts two arguments, but only one of them is necessary for the function to work:

prompt(text, defaultText)

To use the window.prompt() function correctly, remember that the text parameter has to be included in the parentheses. The message you type in as this argument will be shown to the user once the dialog boxes are loaded.

The second argument called defaultText is optional. However, you will need it if you wish to include a default value in the text input field. In other words, if a dialog box requires a visitor to type in a text, you can set an initial message in the field.

Parameter Data Type Description
text String Text that is displayed inside the dialog box. Required.
defaultText String Default input. Optional.

Return Value

The JavaScript prompt() function will deliver results according to the way visitors respond to the dialog box. For instance, if they fill in the required text input field and click OK, the function will return a string with the users' input.

If nothing is entered, and the user still clicks OK, an empty string is simply returned. However, if a person refuses to respond and clicks CANCEL, the prompt JavaScript function will return null.

What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen