Javascript Display Message
JavaScript has numerous built-in methods that can help in displaying popup
messages for various purposes.
Alert Box
- This is used to show a message to a user, particularly where the emphasis is needed.
- It comes with an
OK
button that closes the popup when clicked. - It is created by calling the JavaScript’s
alert()
function.
alert("Hello World!"); // to display a string message alert(12); // to display a number alert(true); // to display a boolean
Confirm Box
- Sometimes, a user is expected to confirm to proceed.
- For example, you may want a user to confirm deletion or update certain details before the process is completed.
- This can be done using the
confirm()
function provided by JavaScript. - This function will display a popup box to the user with two buttons, namely OK and Cancel.
- The next step is determined by the button that the user clicks.
<h1>confirm()</h1> <p id="del"></p>
let userChoice; if (confirm("Do you really want to delete the data?") == true) { userChoice = "Data deleted successfully!"; } else { userChoice = "Delete Canceled!"; } document.getElementById("del").innerHTML = userChoice;
Prompt Box
- In some cases, you may need to receive user input and use it to perform further actions on the web page.
- The function should take two string parameters.
- The first one is the message that will be displayed.
- The Second one is the default value in the input text once the message has been displayed.
prompt([string display_message], [string default_Value]);
<h1>prompt()</h1> <p id="abc"></p>
let age = prompt("What is your age?", "26"); document.getElementById("abc").innerHTML = "You are " + age + " years old ";
- The code prompts you to enter your age.
- If you don’t and click the OK
button
, 26 will be used as your default age.