Layout Style

Full Width Boxed

Background Patterns

Color Scheme

Top Ad unit 728 × 90

أخر الأخبار

How to create a Simple calculator Using HTML and JavaScript

Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

Steps to create a Simple calculator Using HTML and JavaScript


1. At first Insert a <form> element within <body> tag.
2. Create a table using <table> .....</table> tag.
3. Insert two types of Input text and button within table data of table row using <tr><td>....</td></tr> tag.
4. Assign OnClick event for all the buttons having numbers and arithmetic operators.
5. Give blank value for Clear(C) button.
6. Use eval() function to evaluate the numbers on OnClick event of equal to sign button.

Full HTML code for a Simple HTML calculator


<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<form Name="calc">
<table border=2>
<tr>
<td colspan=4><input type=text Name="display"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="C" OnClick="calc.display.value=''"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</body>
</html>



Preview of Simple HTML calculator



Related Search Terms


Related Posts:


How to create a Simple calculator Using HTML and JavaScript Reviewed by Unknown on 12:00 ص Rating: 5

ليست هناك تعليقات:

جميع الحقوق محفوظة لـ AL GOKER © 2015 - 2016
Powered By Blogger, Designed by Tarkhawy

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.