Updated June 22, 2023
Introduction to JavaScript prompt
- A prompt box is used to ask the user to enter dynamic values.
- After entering a value, click the OK or Cancel buttons to take the necessary action. If you click OK or enter, then the value is read from user input into our code.
- If you click Cancel, the prompt pop up canceled and shows a message that the user canceled the prompt.
Syntax:
prompt("message","default value");- message: Write some text about what a user must enter while giving input. Suppose no empty popup box is displayed without any text.
- default value: You can also have some default value initially for user understanding.
Syntax:
prompt("message");- message: Write some text about what a user must enter while giving input.
Note: You can also use a prompt box without a default value.
- A prompt () function can also be used with a prototype Window.
Syntax:
Window.prompt(); //open empty pop up box without any text.Real-time Example: In any application, the form user wants to enter his age; he has dynamically entered the value. At this point of time, we used a prompt popup box to enter user input
Examples of JavaScript prompt
Given below are the examples of JavaScript prompts:
Example #1 – Display the entered text to the user.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Displaying User Input</h1>
</font>
<script>
function getMyArray() {
var userInput=window.prompt();
document.write("User input is =>"+userInput);
}
getMyArray();
</script>
</body>
</html>Before entering input-Output:
After entering input-Output:
Explanation:
- As you can see from the above output, prompt() gives a popup without any text.
- Once the popup opens, enter some text and click OK or enter.
- The provided input is displayed in the output as the above output.
Example #2 – Display array values entered by the user.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Displaying User Input</h1>
</font>
<script>
function getMyArray() {
var userInputArray=[];
for(let i=0;i<=9;i++)
{
userInputArray.push(prompt("enter array index "+(i+1)+" value","1"));
}
document.write("User input is Array values are =>")
for(let i=0;i<=9;i++)
{
document.write(userInputArray[i]+"<br>");
}
}
getMyArray();
</script>
</body>
</html>Before entering input-Output:
After entering input-Output:
Explanation:
- As you can see in the above code, defined an empty array with unserInputArray name.
- The for loop runs 10 times because the user inputs 10 values dynamically.
- Prompt taken with a message and default value.
- Each value-added to the array using the inbuilt push method of an array (push()).
- Next, for loop iterating array value and display back to the user.
Example #3 – Display addition, multiplication, subtraction, and division to user input 2 values.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Displaying Addition, Subtraction, Multiplication and Division for User Input</h1>
</font>
<script>
var a=parseInt(prompt("enter first value","1"));
var b=parseInt(prompt("enter second value","2"));
function getMyAddition() {
document.write("Addition of "+a+" and "+b+" is =>"+(a+b)+"<br>");
}
function getMySubtraction() {
document.write("Subtraction of "+a+" and "+b+" is =>"+(b-a)+"<br>");
}
function getMyMultiplication() {
document.write("Multiplication of "+a+" and "+b+" is =>"+(a*b)+"<br>");
}
function getMyDivision() {
document.write("Division of "+a+" and "+b+" is =>"+(b/a));
}
getMyAddition();
getMySubtraction();
getMyMultiplication();
getMyDivision();
</script>
</body>
</html>Before entering input-Output:
After entering input-Output:
Explanation:
- The above code asked the user to enter 2 input values.
- You can see prompt values parsed with parseInt() because the user entered input treated by default as a string.
- The getMyAddition () function adds 2 numbers, 10, and 20 is 30.
- The getMySubtraction () function adds 2 numbers, 10, and 20 is 10.
- getMyMultiplication() function offers the addition of 2 numbers, 10 and 20 is 200.
- The getMyDivision () function adds 2 numbers, 10, and 20 is 2.
Example #4 – Display the sum of 50 numbers starting with the user input value.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Sum of 50 numbers from a number entered by User</h1>
</font>
<script>
var a=parseInt(prompt("enter a value to start sum"));
var initial=a;
var sum=0;
var temp=50;
function getMySum() {
while(temp>0)
{
sum=sum+a;
a++;
temp--;
}
document.write("Sum of 50 numbers from strating "+initial+" is =>"+sum);
}
getMySum();
</script>
</body>
</html>Before entering input-Output:
After entering input-Output:
Explanation:
- The code automatically parses the user’s input and converts it into a string.
- You have seen that prompt can also be taken without a default value.
- In the temp variable, stored value 50 for 50 iterations of the while loop.
- In the sum variable stored value 0
- The initial variable stored user-entered value because we could take the value as a tease in the output display.
- The while loop checks temp>0 or not every time. If true, while executed.
50>0 so
Sum=0+a; Here a=3 so sum=3
a++=>4
temp--=>49- Again, while loop executes 49>0 so
Sum=3+a; Here a=4 so sum=7
a++=>5
temp--=>48- Furthermore, while loop executes 48>0 so
Sum=7+a; Here a=5 so sum=12
a++=>6
temp--=>47- So, on so forth until while loop false (0>0).
- After the entire execution of while, output prints as 1375 sum starting from 3.
Example #5 – Display habit by corresponding user input
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Display your habit based on Choosen color</h1>
</font>
<script>
function getMySum(color) {
var myHobby="";
switch(color)
{
case "Red":
myHobby = "Playing Cricket!";
break;
case "Green":
myHobby = "Singing Songs!";
break;
case "Blue":
myHobby = "Dancing!";
break;
case "White":
myHobby = "Reading Books!";
break;
default:
myHobby = "You can be habituated to anything!";
}
return myHobby;
}
var color=prompt("which color do you like most?");
var hobby=getMySum(color);
document.write(hobby);
alert(hobby);
</script>
</body>
</html>Before entering input-Output:
After entering input-Output:
Explanation:
- The above code passes input from the getMyHobby() function.
- The case will be the corresponding hobby when the user enters any color based on the color switch.
- The output will show in the alert box and console, respectively.
Conclusion
The prompt is used to enter values from the user explicitly. The prompt () function can be used with a message and default text or empty prompt ()
Recommended Articles
This has been a guide to JavaScript prompt. Here we discuss the working and different examples of JavaScript prompt. You may also have a look at the following articles to learn more –
