Data Type Conversion and IsNaN() Function in JavaScript

Ankit Bansal
9y
6.5k
0
1

100

Article

DemoApplication.zip

Let's see the the following example that helps.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DemoApplication.index" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Second Class of JavaScript</title>
<script type="text/javascript">
function addNumbers() {
var first = document.getElementById("txtFirst").value;
if (first == "") {
alert('First Number is Required.');
return;
document.getElementById("txtFirst").focus(this);
}
first = parseFloat(first);
if (isNaN(first)) {
alert('This field only accepts Numeric Value.');
document.getElementById("txtFirst").focus(this);
}
var second = document.getElementById("txtSecond").value;
if (second == "") {
alert('Second Number is Required.');
return;
document.getElementById("txtSecond").focus(this);
}
second = parseFloat(second);
if (isNaN(second)) {
alert('This field only accepts Numeric Value.');
document.getElementById("txtSecond").focus(this);
}
document.getElementById("txtResult").value = first + second;
}
</script>
</head>
<body>
<form runat="server">
<table style="border: 1px solid black; font-family:Calibri">
<tr>
<td>Enter the First Number :
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Enter the Second Number :
</td>
<td>
<asp:TextBox ID="txtSecond" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Result is :
</td>
<td>
<asp:TextBox ID="txtResult" runat="server" ReadOnly="true"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="btnAdd" runat="server" value="Add" onclick="addNumbers()" />
</td>
</tr>
</table>
</form>
</body>
</html>

In the preceding example:

We have the Script section within the Head section.
We have inserted a table that contains two columns and four rows.
Three text boxes are included with a button to add two numbers.

We want that when the button is clicked, it adds two numbers that have been entered by the users into the textboxes. But if a user does not enter a value in either of the text boxes, we want JavaScript to show an alert and also if a user enters a string instead of a number, the script should also show an alert. The preceding code implements that.

The following explains the code:

Create two variables for storing the numbers entered by the user. We have the variables "first" and "second".
Using an if block, we are checking if the text box is empty. If it is empty, then it throws an alert but if something is written in it, it does not do the "if" block.
Now we must convert the value entered by the user into a float data type because by default, the text box considers everything entered in it to be a string. We have done that using the "parse.Float()" function that is part of JavaScript. We have converted it into a Float data type instead of an Integer Data type because if a user enters a decimal value, the script ignores the decimal places and thqt is wrong. So, Float is the correct Data type to be converted.
The "return" statement returns control to the webform after showing one alert. Otherwise, it shows all the alerts at the same time.
Now, the isNaN() (isNotANumber) function checks whether the user has entered a numeric value or not. It returns true if the value is not a number and returns false if the value is a number.
"focus()" returns the focus to the control.
Finally, We have added the two variables created in the first step and returned that calculated value in the third TextBox "txtResult".