prompt

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:

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:

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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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.

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.