Introduction to JavaScript prompt
- A prompt box used for asking the user to enter dynamic values.
- After entering a value, either click the OK button or Cancel button to take necessary action. If you click OK or enter, then the value read from user input into our code.
- If you click Cancel, prompt pop up canceled and shows a message that User canceled the prompt.
Syntax:
prompt("message","default value");- message: Write some text about what a user must enter while giving input. If not empty pop up box 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, form user wants to enter his age, simply 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 prompt:
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 popup open enter some text and click OK or enter.
- Provided input 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.
- In for loop taken for prompt taken 10 times because of entering user to 10 values dynamically.
- prompt took with a message and default value.
- Each value-added to the array by 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:
- In the above code asked the user to enter 2 input values.
- You can see prompt values parsed with parseInt() because user entered input treated by default as string.
- getMyAddition() function gives addition of 2 numbers 10 and 20 is 30.
- getMySubtraction() function gives addition of 2 numbers 10 and 20 is 10.
- getMyMultiplication() function gives addition of 2 numbers 10 and 20 is 200.
- getMyDivision() function gives addition of 2 numbers 10 and 20 is 2.
Example #4 – Display the sum of 50 numbers from 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:
- In the above code, the input is taken from the user and parsed it because of user input by default string.
- You clearly have seen that prompt can be taken without default value as well.
- In the temp variable stored value 50 for 50 iterations of while loop.
- In the sum variable stored value 0
- In the initial variable stored user-entered value because we could take the value as a tease in the output display.
- In the while loop, it checks temp>0 or not every time. If true while executes.
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- Again, 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:
- In the above code input passed from getMyHobby() function.
- When the user enters any color based on the color switch case will the corresponding hobby.
- The output will show in the alert box and console respectively.
Conclusion
prompt is used to enter values from user explicitly. prompt() function can be used with a message and default text or empty prompt ()
