I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/Alert, Confirm And Prompt In JavaScript

Alert, Confirm And Prompt In JavaScript

June 14, 2021

Table Of Contents

    Interaction with users is one of the most important parts of any web application and can be done in a number of different ways.

    You can either create a nice looking custom form to collect data, or sometimes (when creating Minimum Viable Product) use some built-in functionality to trigger standard browser popups that require a specific action.


    An alert(text) method tells the browser to display an alert box with a specific message and "OK" button:

    alert("Hello, world");

    It's useful if you don't want your users to miss an important piece of information because it prevents users from browsing the site until the button is pressed.

    Here's what it looks like in Google Chrome:

    Alert In Google Chrome


    The confirm(message) method tells the browser to display a dialogue with "OK" and "Cancel" buttons, and waits for the user to click either button:

    const result = confirm("Do you want to proceed?");

    It accepts a value displayed to the user and returns true if the user pressed "OK" button, otherwise - false.

    Here's what it looks like in Google Chrome:

    Confirm In Google Chrome

    Compared to Alert, it contains both, "OK" and "Cancel" buttons.


    The prompt([message], [defaultValue]) method tells the browser to display a dialogue with an optional message and wait until either input is given or the dialogue is canceled:

    const result = prompt("How old are you?", 18);

    Two arguments are accepted, which are optional:

    • message - text that will be displayed to the user
    • defaultValue - default value of the input field in the dialogue

      Important note: Always specify the default value in Internet Explorer, because if nothing is passed, it will display "undefined" text by default. You must pass at least an empty string.

    A value will be returned containing the text specified by the user, or null if the dialogue was aborted.

    Here's what it looks like in Google Chrome:

    Prompt In Google Chrome


    In this article, we learned 3 ways to quickly interact with users:

    • alert - displays a dialogue with a message and "OK" button
    • confirm - displays a dialogue with a message, "OK" and "Cancel" buttons
    • prompt - displays a dialogue that waits for the user's input, "OK" and "Cancel" buttons

    Importantly, all three methods interrupt the execution of a script and do not allow the user to interact with the site until the desired action has been performed.

    There are also a few limitations:

    • The design of the popup is browser specific and cannot be changed
    • The position of the popup is determined by the browser, typically, it is the top center of the window.

    I suggest using these methods if you are building the MVPs and you care more about functionality at a given point than design.

    Receive all new posts directly to your e-mail
    No spam, only quality content twice a week
    Let me know what you think about this article
    Click here to write response...