Exercise: Integers Only

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.

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?

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.