The JavaScript prompt – Getting user input

In this session we’ll look at the JavaScript prompt. The prompt() is a method of the window object, just like alert() or confirm().

The format for prompt() is similar to alert() or confirm() except for one addition.

prompt("Message", "default value in the text field");

In addition to the “OK” and “Cancel” buttons, a prompt box also has a text field that is employed for gathering visitor input. JavaScript lets you specify a default text for this text field. This is optional, that is you can construct a prompt() without specifying the default text. In such cases, JavaScript displays an ugly “undefined” value in the text field.

The information submitted by the visitor from prompt() can be stored in a variable, just as we had stored the value returned by confirm().

var name = prompt("What is your name", "Type you name here");

Once we have the value, we can write a customized greeting using document.write() as I have done or display an alert box.

var name = prompt("What is your name", "Type you name here");
alert("Hi " + name + "\nHope you are enjoying JavaScript!");

Click here to test the code.

It’s important to remember that the value returned by prompt() and subsequently stored in a variable will always be a string data type. This is fine if you are dealing with text, but might present problems to the code if you plan to receive numeric data through prompt(). Javascript provides two functions to convert this string value to a numeric data type; parseInt() and parseFloat().
The parseInt() converts a string to an integer value while parseFloat() parses the string converting it to a floating point number.

Note: An integer is a whole number without any fractional part while floating-point numbers have a decimal part.

Now let’s write a small script that takes a number from the visitor, checks whether its odd or even and displays the result through an alert box.

var n = prompt("Check your number", "Type your number here");

n = parseInt(n);

if (n == 0)
   {
   alert("The number is zero");
   }
else if (n%2)
   {
   alert("The number is odd");
   }
else
   {
   alert("The number is even");
   }

Click here to test the code

When parseInt() or parseFloat() encounter alphabet or any non-digit character, parsing (conversion) stops and the functions return NaN, which means Not a Number. The only way to test for NaN is to use isNaN() function.

We can make the code above more user-friendly by introducing one more if statement that checks for valid input.

var n = prompt("Check your number", "Type your number here");
n = parseInt(n);
if (isNaN(n))
   {
   alert("The input cannot be parsed to a number");
   }
else
   {
   if (n == 0)
      {
      alert("The number is zero");
      }
   else if (n%2)
      {
      alert("The number is odd");
      }
   else
      {
      alert("The number is even");
      }
   }

Click here to test the code.