Home arrow HTML arrow Page 4 - Function Details for a Web Page Calculator
HTML

Function Details for a Web Page Calculator


Welcome to the third part of a six-part series on building a web page calculator. In the previous part I gave you the skeletons of our two standard calculator functions. But there are fine details to these functions that we have to examine and appreciate. We start with the showNum() function.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 2
March 18, 2009
TABLE OF CONTENTS:
  1. · Function Details for a Web Page Calculator
  2. · First Segment continued
  3. · The Second Code Segment
  4. · Second Code Segment continued
  5. · The Third Code Segment

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Function Details for a Web Page Calculator - Second Code Segment continued
(Page 4 of 5 )

The rest of the cases for the digit buttons are:


case "B3":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="3";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B4":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="4";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B5":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="5";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B6":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="6";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B7":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="7";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B8":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="8";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B9":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="9";

document.getElementById('CI1').value = valueAlreadyThere;

break;


The explanation for each of these cases is similar to the case for the digit button of 2.


The case for the decimal point is:


case "BPOINT":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+=".";

if (!(/.*..*..*/.test(valueAlreadyThere)))

document.getElementById('CI1').value = valueAlreadyThere;

break;


The explanation for the first two lines is as in the above cases. The next statement is an “if” statement. You cannot have more than one decimal point in a number. So the “if” condition uses regular expression techniques to check that. The line in the “if” statement writes the decimal point to the display.

The case to retrieve the number in memory (the store) is:


case "BRM":

document.getElementById('CI1').value = memVar;

break;


The only statement here simply copies the memory content to the display. In other words, the new display content becomes the content of the store.

The case to change the sign of the number of the display is:


case "BPM":

var temp = -1 * document.getElementById('CI1').value;

document.getElementById('CI1').value = temp;

break;


When the +/- button is clicked, the sign of the number on the display is changed. The first line for the case multiplies the value of the display by –1 and assigns the result to the temp local variable. The second line makes the value of temp the new content of the display.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials