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:


Popular posts from this blog

MCQ of Structured Query Language(SQL) With Answer Set -2

1. Which of the following query is correct for using comparison operators in SQL ? A) SELECT sname, coursename FROM studentinfo WHERE age>50 and <80; B) SELECT sname, coursename FROM studentinfo WHERE age>50 and age <80; C) SELECT sname, coursename FROM studentinfo WHERE age>50 and WHERE age<80; D) None of the above 2.How to select all data from studentinfo table starting the name from letter 'r'? A) SELECT * FROM studentinfo WHERE sname LIKE 'r%'; B) SELECT * FROM studentinfo WHERE sname LIKE '%r%'; C) SELECT * FROM studentinfo WHERE sname LIKE '%r'; D) SELECT * FROM studentinfo WHERE sname LIKE '_r%'; 3. Which of the following SQL query is correct for selecting the name of staffs from 'tblstaff' table where salary is 15,000 or 25,000? A) SELECT sname from tblstaff WHERE salary IN (15000, 25000); B) SELECT sname from tblstaff WHERE salary BETWEEN 15000 AND 25000; C) Both A and B D) None of the above 4. The SELECT
Read more

Solved MCQ on Stack and Queue in Data Structure set-1

1) ......... form of access is used to add and remove nodes from a queue. A. LIFO, Last In First Out B. FIFO, First In First Out C. Both a and b D. None of these 2) In liked representation of stack ....... holds the elements of the stack. A. INFO fields B. TOP fields C. LINK fields D. NULL fields 3) ........ form of access is used to add remove nodes from a stack. A. LIFO B. FIFO C. Both A and B D. None of these 4) In the linked representation of the stack ......... behaves as the top pointer variable of stack. A. Stop pointer B. Begin pointer C. Start pointer D. Avail pointer 5) New nodes are added to the ......... of the queue. A. Front B. Back C. Middle D. Both A and B 6) In linked representation of stack the null pointer of the last node in the list signals .......... A. Beginning of the stack B. Bottom of the stack C. Middle of the stack D. In between some value 7) What happens when you push a new node onto a stack? A. The new node is placed at the front of the linked list B. The
Read more

JDBC MCQ Interview Questions with Answers set-2

Image
1. A Java program cannot directly communicate with an ODBC driver because ....... ODBC Administrator (Photo credit: Wikipedia ) A) ODBC written in C language B) ODBC written in C# language C) ODBC written in C++ language D) ODBC written in Basic language 2.The JDBC-ODBC Bridge driver translates the JDBC API to the ODBC API and used with ....... A) JDBC drivers B) ODBC drivers C) Both A and B D) None of the above 3. The ............................. package contains classes that help in connecting to a database, sending SQL statements to the database, and processing the query results. A) connection.sql B) db.sql C) pkg.sql D) java.sql 4. The ................................ method executes a simple query and returns a single Result Set object. A) executeUpdate() B) executeQuery() C) execute() D) noexecute() 5. The ......................... method executes an SQL statement that may return multiple results. A) executeUpdate() B) executeQuery() C) execute() D) noexecute() 6. The .........
Read more