In this article, you will learn how user interaction happens in JavaScript using alert, prompt and confirm functions.

Alert Function

It displays the message in Alert Dialog Box. Once triggered, it waits until the user presses “OK” or dismisses the dialog box.

Syntax πŸ’»

alert();
alert(message);

Example 😍

Click/tap on πŸ‘†πŸ» above buttons to understand how alert() function works. This is a live example which executes below JavaScript code.

alert(); // Button: Alert without Message - No message is passed
alert("Hello World"); // Button: Alert with Message - Displays "Hello World"

Prompt Function

In addition to displaying the message in a Dialog Box, the prompt function also accepts text from the user. Once triggered, it waits until the user presses “OK” or Cancels the dialog box.

Syntax πŸ’»

prompt(message);
prompt(message, default);

The prompt() function returns string if user enters text and clicked “OK” otherwise null if the user clicked “Cancel”.

In case, if you want to work with numeric value then you may need to convert the accepted value into number, explicitly.

Here, “default” is an optional argument which displays the default value in the textbox of the dialog box.

Example 1 😍

Click/tap on πŸ‘†πŸ» above button to understand how prompt() function works when we don’t pass default value as an argument. This is a live example which executes below JavaScript code.

let clrName = prompt('What\'s your favorite color?');
alert("Wow.. 😍 Your favorite color is " + clrName);

Example 2 😍

Click/tap on πŸ‘†πŸ» above button to understand how prompt() function works when we pass the default value.

You will notice that the textbox in the dialog box already contains the default value passed as an argument.

let clrName = prompt('What\'s your favorite color?', 'Red');
alert("Wow.. 😍 Your favorite color is " + clrName);

Confirm Function

As the name states, the confirm() function is used for confirmation purpose. Once triggered, it waits until the user confirms or cancels the dialog box.

Confirm indicates boolean true while Cancel indicates boolean false.

Syntax πŸ’»

confirm(message);

Example 😍

Click/tap on πŸ‘†πŸ» above button to understand how confirm() function works. This is a live example which executes below JavaScript code.

let res = confirm('Are you sure, you want to exit?');
alert("You opted with " + res);

Summary πŸ“–

Alert

To show a message.

Prompt

To show a message accepted from the user through textbox. It returns the text or, if Cancel button or Esc key is clicked, null.

Confirm

To show a message and wait for the user to press β€œOK” or β€œCancel”. It returns true if OK is clicked and false if Cancel is clicked or Esc key is pressed.


This is how a user can interact in JavaScript with the help of alert, prompt and confirm functions. For more JavaScript related posts, click here.