Course: JavaScript

Progress (0%)

Exercise: Integers Only

Exercise 9 Easy

Prerequisites for the exercise

  1. JavaScript Numbers — Basics

Objective

Create a program to ask the user to enter an integer and then validate it.

Description

Suppose you're making a summation program in JavaScript, computing the sum of all the positive integers up to and including an integer n.

The program that you're developing obtains this input via a browser prompt (prompt()).

Now there's an issue that you have to deal with. There is a whole variety of different inputs that a user can possibly provide which might not represent an integer.

For example, the user could enter 'Hi'. Clearly, this ain't an integer — it ain't even a number. You need to deal with such cases appropriately, making sure that the entered value is a perfectly valid integer.

Some other instances of invalid inputs follow: '10x', '10.1', 'NaN', 'Infinity', '' (an empty input).

In this exercise, you have to implement a program asking the user to enter a valid integer via a browser prompt.

The prompt message should simply read 'Enter an integer:', clearly asking the user to enter an integer value.

In case the entered value is invalid, make an alert message signalling about the invalid input and then lay out the prompt again. This chain of alert-then-prompt actions should keep on happening so long as the input is not valid.

But the moment the input is a valid integer, your program must write the integer to the document and exit.

Note that preceding or succeeding whitespace characters don't matter. That is, the following inputs, '50  ' (two succeeding spaces), '   50' (three preceding spaces), are both just as good as '50'.

Here's a live demonstration of how the program should work:

Live Example

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-9-Integers-Only and put the .html solution files for this exercise within it.

Solution

As we know about the prompt() function in JavaScript — and in general, any means of obtaining input from the user in any programming language whatsoever — we get back a string containing the entered value.

Therefore, if we wish to determine whether the entered value is a valid integer, we ought to know how to figure out whether a string contains a valid integer value or not.

And obviously, one way or the other, this requires us to convert the string into a number. For this, we can use the Number() function.

As we learnt in the previous chapter, if the string provided to Number() can't be converted to a meaningful number (perhaps because it has invalid characters in it), we'll get NaN returned.

So the first solution that might come to mind is to check against a return value of NaN and mark the entered value as valid if the return value is not NaN.

However, quite quickly we can realize that this ain't the correct solution. If we have the string '10.1', passing it to Number() would not return NaN, which we might count as being valid going with the proposed solution above, but because it isn't an integer value so to speak, it's invalid as well.

Hmm. So what should we use?

Well, parseInt() seems a potential candidate. However, alone, even parseInt() can't validate the entered value.

We don't need to go far off to confirm this. For both the strings '10' and '10.1', parseInt() returns back the same value 10; there's no way to distinguish between the original values just by reading 10.

Isn't this becoming complicated? Well, no. We already have the two pieces of the puzzle, only to be joined together to solve it. Does something click?

In order to determine whether a given string str contains a valid integer value, we can compare Number(str) with parseInt(str) and look for a truthy outcome.

The idea behind this notion is pretty straightforward: if parseInt() is able to parse an integer out of a given value (a string in this case), then in order for the value to be a correct integer, converting it to a number using Number() should return back that same integer.

Let's check this on a couple of values:

  • 'Hi'Number('Hi') returns NaN and parseInt('Hi') returns NaN as well. Since NaN !== NaN, 'Hi' does NOT contain a valid integer. (This is a perfect example of reasoning why two NaNs should not compare as equal, as we learnt in the previous chapter.)
  • '10.1'Number('10.1') returns 10.1 and parseInt('10.1') returns 10. Since 10.1 !== 10, '10.1' does NOT contain a valid integer.
  • '10x'Number('10x') returns NaN and parseInt('10x') returns 10. Since NaN !== 10, '10x' does NOT contain a valid integer.
  • 'NaN'Number('NaN') returns NaN and parseInt('NaN') returns NaN. Since NaN !== NaN, 'NaN' does NOT contain a valid integer.
  • 'Infinity'Number('Infinity') returns Infinity and parseInt('Infinity') returns NaN. Since Infinity !== NaN, 'Infinity' does NOT contain a valid integer.
  • '10'Number('10') returns 10 and parseInt('10') returns 10. Since 10 === 10, '10' does contain a valid integer.

Perfect!

With this elegant solution in hand, let's now get to the implementation of the program.

We start off with a prompt():

var int = prompt('Enter an integer:');

Next up, we need a while loop to keep iterating as long as the input is invalid. The condition for re-iteration is that the input is invalid, that is, Number(int) !== parseInt(int).

This is accomplished below:

var int = prompt('Enter an integer:');

while (Number(int) !== parseInt(int)) {
   alert('Invalid input');
   int = prompt('Enter an integer:');
}

First we make an alert message and then lay out the same prompt() again.

If the entered value is valid, execution exits the loop. At this stage, we need to write the given input to the document, using document.write().

Let's do this now:

var int = prompt('Enter an integer:');

while (Number(int) !== parseInt(int)) {
   alert('Invalid input');
   int = prompt('Enter an integer:');
}

document.write(int);

And this completes the exercise.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage