A simple Javascript calculator program

In this post we will look into a simple calculator program working all using simple html and javascript. We are using dynamic row addition and then based on user inputs additions are performed.

This is a simple demonstration which can be extended to a full fledged calculator with all operations other than just addition.

Below is the html and javascript for the same:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Javascript Calculator</title>
    <script type="text/javascript" language="javascript">
        
        //check if the previous sibling node is an element node
        function get_previoussibling(n) {
            x = n.previousSibling;
            while (x.nodeType != 1) {
                x = x.previousSibling;
            }
            return x;
        }

        //This function will add rows to the table and checks for a min of two rows in the table
        function addButton(e) {
            var textNode = get_previoussibling(e);
            var value = textNode.value;
            if (value < 2) {
                alert("Enter atlest 2 so that we can have the addition going");
                //textNode.value = '2';
            }
            else {
                changeTableStructure(value);
            }

        }

        //changing table structure there by add the new rows and the Sum line to it
        function changeTableStructure(count) {
            var table = document.getElementsByTagName('table')[0];

            try {
                //delete rows
                for (var i = table.rows.length-1; i >= 0; i--) {
                    table.deleteRow(i);
                }
                //create rows
                for (var i = 0; i < count; i++ ) {
                    var row = table.insertRow(i);

                    var cell1 = row.insertCell(0);
                    var counter = i + 1;
                    cell1.innerHTML = 'Number ' + counter + ':';

                    var cell2 = row.insertCell(1);
                    var element2 = document.createElement("input");
                    element2.type = "text";
                    element2.value = 0;
                    element2.style.width = '30px';
                    cell2.appendChild(element2);
                }

                if (table.rows.length == count) {
                    var row = table.insertRow(count);

                    var cell1 = row.insertCell(0);
                    cell1.innerHTML = 'Sum:';
                    cell1.style.borderTop = 'solid 1px black';
                    cell1.style.borderBottom = 'solid 1px black';

                    var cell2 = row.insertCell(1);
                    var element2 = document.createElement("div");
                    element2.innerHTML = '0';
                    cell2.appendChild(element2);
                    cell2.style.borderTop = 'solid 1px black';
                    cell2.style.borderBottom = 'solid 1px black';
                }

            }
            catch (e) {
                alert(e);
            }
        }

        //recalculate - reads all the text values, convert them to int and then add and set the value of Sum node.
        function recalculate() {
            var table = document.getElementsByTagName('table')[0];
            var sum = parseInt('0');
            for (var i = 0; i < table.rows.length - 1; i++) {
                var row = table.rows[i];
                var textBox = row.cells[1].childNodes[0];
                if (textBox.value != null) {
                    var number = parseInt(textBox.value, 10)
                    sum = sum + number;

                }
            }

            var row1 = table.rows[table.rows.length-1];
            row1.cells[1].childNodes[0].innerHTML = sum;

        }
    </script>
</head>
<body>
This calculator can add two-digit numbers and display the result. First enter how many numbers you want to enter and press Change button. Then enter your numbers in the table and press Recalculate. Any blank or non-numeric input would be skipped while adding the numbers.<br /><br /><br />
Number of Rows: <input type=text value=2 style="width:30px" maxlength=2 >  <input type=button value='Change' onclick="addButton(this)" />
<br /><br />
<table cellspacing=0 cellpadding=4>
<tr>
<td>Number 1:</td>
<td><input value=20 style="width:30px" type=text  maxlength=2/></td>
</tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>

<tr>
<td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td>
<td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td>
</tr>

</table>

<input type=button value='Recalculate Sum' onclick="recalculate()" />
</body>
</html>



Hope this program will help and you can write us in case you face any problem in this program.

- bye for now.

Comments (0)
Posted by: sushant.pandey

Categories: ASP.NET, Javascript

13. January 2012

Tags:

Add comment

  Select your country

biuquote
  • Comment
  • Preview
Loading