The `prompt()` dialog box is a feature in JavaScript that allows for user interaction by displaying a small dialog box with a message and allowing the user to input data. It functions similarly to the `alert()` and `confirm()` dialog boxes, but with an added input field for user response.
Here is the syntax for using the `prompt()` dialog box:
variable = prompt(message, default);
`message` parameter: is a string that specifies the text that will be displayed in the dialog box, acting as a prompt to the user. It can be any message or question that the developer wants to ask the user.
`default` parameter: is an optional parameter that sets a default value in the input field. It is displayed as pre-filled text and can help provide a suggestion or example for the user. If no default value is provided, the input field will be empty.
When the `prompt()` function is called, it will halt the execution of the JavaScript code until the user interacts with the dialog box. The user can either enter a value in the input field and click "OK" or click "Cancel".
If the user clicks "OK" after entering a value, the `prompt()` function will return the value entered by the user as a string and assign it to the `variable` variable specified in the syntax above. This allows the developer to store and use the user's input in their code.
If the user clicks "Cancel" or closes the dialog box without entering any value, the `prompt()` function will return `null`.
Here are some examples usage of the `prompt()` dialog box:
Example 1: Getting User Name
let name = prompt("Please enter your name:");
if (name !== null) {
console.log("Hello, " + name + "!");
} else {
console.log("You did not enter a name.");
}
In this example, when the code is run, a dialog box with the message "Please enter your name:" will appear. The user can then input their name and click "OK". If they do so, the code will output "Hello, [name]!" where `[name]` is the name entered by the user. If the user clicks "Cancel" or closes the dialog box without entering any value, the code will output "You did not enter a name."
Example 2: Getting the User's Age
let age = prompt("Please enter your age:");
if (age !== null) {
age = parseInt(age); // converting the string input to a number
if (isNaN(age)) {
console.log("Invalid input. Please enter a number for age.");
} else {
console.log("You are " + age + " years old.");
}
} else {
console.log("You did not enter your age.");
}
In this example, the code prompts the user to enter their age. The input is then converted to a number using `parseInt()`. If the input is a valid number, the code outputs "You are [age] years old." Otherwise, it outputs "Invalid input. Please enter a number for age." If the user clicks "Cancel" or closes the dialog box without entering any value, the code outputs "You did not enter your age."
Example 3: Calculating the Area of a Circle
const PI = 3.14159;
let radius = prompt("Please enter the radius of the circle:");
if (radius !== null) {
radius = parseFloat(radius); // converting the string input to a floating-point number
if (isNaN(radius)) {
console.log("Invalid input. Please enter a number for the radius.");
} else {
let area = PI * radius * radius;
console.log("The area of the circle is " + area.toFixed(2));
}
} else {
console.log("You did not enter the radius.");
}
In this example, the code prompts the user to enter the radius of a circle. The input is then converted to a floating-point number using `parseFloat()`. If the input is a valid number, the code calculates the area of the circle using the formula `PI * radius * radius` and outputs it with 2 decimal places using `toFixed()`. If the input is not a valid number, the code outputs "Invalid input. Please enter a number for the radius." If the user clicks "Cancel" or closes the dialog box without entering any value, the code outputs "You did not enter the radius."
These examples demonstrate how the `prompt()` dialog box can be used to gather user input and perform different actions based on that input. It is a useful tool for creating interactive JavaScript applications.