Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript Prompt Example
In this article, we will learn to use the prompt() function in Javascript. The prompt() method in JavaScript allows developers to collect user input through a pop-up dialog box.
What is the prompt() Method in JavaScript?
The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK. This dialog box is displayed using a method called prompt().
Syntax
var userInput = prompt("Message", "Default value");
The following are the parameters of the prompt() function ?
-
Message (required): A text string is displayed in the dialog box to instruct the user.
-
Default value (optional): A pre-filled value inside the input field, which the user can modify.
- Return Value:
- If the user enters a value and clicks "OK," the function returns the entered text.
- If the user clicks "Cancel" or closes the dialog, null is returned.
prompt() Example with Button Click
The following example enhances the prompt() functionality by triggering it when a button is clicked. The result is displayed dynamically on the page.
Following are the steps to trigger the prompt dialogue box ?
- A button labeled "CLICK HERE" triggers the prompt() method when clicked.
- The prompt("Are you sure?") function asks the user to enter a response.
- The input is checked:
- If the user clicks Cancel, the message "You pressed Cancel" appears.
- If the user enters text, it displays "You entered: [text]" dynamically.
- If the user clicks Cancel, the message "You pressed Cancel" appears.
- The response is updated inside the .result div.
The document.querySelector() selects the button element with the class "Btn". addEventListener() adds an event listener that triggers when the button is clicked.
document.querySelector(".Btn").addEventListener("click", () => {
let res = prompt("Are you sure");
if (res === null) {
resultEle.innerHTML = "You pressed cancel";
} else {
resultEle.innerHTML = "You entered " + res + " in the prompt box";
}
});
Example
Following is the code for showing the prompt in JavaScript ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Prompt() method</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the prompt dialogue box</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let res = prompt("Are you sure");
if (res === null) {
resultEle.innerHTML = "You pressed cancel";
} else {
resultEle.innerHTML = "You entered " + res + " in the prompt box";
}
});
</script>
</body>
</html>
Output
On clicking on ?CLICK HERE' button and typing something in the promt box ?
On clicking OK on the prompt box ?
Conclusion
The prompt() method in JavaScript is a simple yet effective way to gather user input. While it's useful for quick interactions, it has limitations in terms of styling and usability. Instead of using an intrusive pop-up, we enhance interactivity by displaying the response dynamically after button clicks.
580 Views
