Using a few HTML statements and a little JavaScript, you can build your own calculator that performs addition. This task is not as difficult as it seems because HTML creates calculator controls for you, and JavaScript handles all the calculations. All you have to do is lay out the controls on your Web page so that they create the user interface you desire.
Calculator Controls
Calculators that add numbers require four basic controls: two text boxes to enter numbers, a text box to display results and a button. The following HTML code creates those four controls:
+ =
The button contains a call to a JavaScript function that adds the two numbers and stores the result in the third text box. Every text box requires an "id" value that the JavaScript uses to obtain references to the text boxes.
JavaScript Logic
The following JavaScript statements create three objects that hold references to the three text boxes:
var box1 = document.getElementById["box1"]; var box2 = document.getElementById["box2"]; var box3 = document.getElementById["box3"];
You can then add numbers in the first two text boxes and store them in a variable such as "result," as follows:
var result = Number[box1.value] + Number[box2.value]; box3.innerHTML = result;
The "Number" function converts the text values stored in the text boxes into numbers that JavaScript can manipulate.
Usage
Upload your HTML calculator page to your Web server so that anyone with access to the Internet can use it. You can also run it locally on your computer. After creating your HTML document, find it in Windows Explorer and double-click its icon to display it in your default Web browser. You can then use the calculator to add and subtract numbers. Browsers also allow you to bookmark local HTML pages that reside on your hard drive. Save your calculator page as a bookmark so that you can open it at any time and perform calculations right from your browser.
Enhancements
You don't need to understand Cascading Style Sheets, or CSS, to create a Web page. However, If you do know a little CSS, you can use it create fancier controls. Use color and border attributes, for example, to add colorful borders around your text boxes. You can even put all the controls inside a "div" control and add a background image so that your calculator looks like a real one. If you need to add more numbers, add additional text boxes to the HTML page and modify the JavaScript code so that it includes those text boxes in its calculation.
can we add numbers just only using html
if not then what is the best way to do the same
May 18 '07 #1
No. HTML is not a programming language. Use javascript.
May 18 '07 #2
No. HTML is not a programming language. Use javascript.
thanks for the sugestion
Jun 4 '07 #3
We cannot add two numbers using HTML.You can use javascript for that
the code for this program is
Expand|Select|Wrap|Line Numbers
- //javascript code
- a=15;//initialization of variables
- b=20;
- c=a+b;//perform sum operation
- document.write["sum of numbers is: " +c];//print the result[+ is a concatenate operator]
Jun 6 '07 #4
Warning: the html and code listed in the above post is out of date [deprecated] and should not be used, though it will work. For modern methods, ask on the javascript board.
Jun 6 '07 #5
check this code out, its for a calculator
Expand|Select|Wrap|Line Numbers
- Untitled Document
-
-
Oct 23 '11 #6
Sign in to post your reply or Sign up for a free account.