Do you remember those old paper-tape adding machines that printed a strip as you entered numbers? In this article, I show you how to use simple Java Script to create a similar tape adding machine, except the tape is on your computer screen, not on paper.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact Advertise on Bucaro TecHelp Advertise Here RSS News Feeds News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Easy Code for Screen Tape Adding Machine

Have you ever tried to add a column of numbers with a regular calculator? If you make a mistake, you have to start all over with the first number. Do you remember those old paper-tape adding machines that printed a strip as you entered numbers? In this article, I show you how to use simple Java Script to create a similar tape adding machine, except the tape is on your computer screen, not on paper.

To see a working example of the Screen Tape Adding Machine, click here.

As with all my other Easy Code articles, I'll give you cut-and-paste Java Script code and I'll explain the code in detail so that you can use it and modify it for your own requirements. You can put a copy of the Screen Tape Adding Machine on your own webpage for other's to use.

Before we design the complete Screen Tape Adding Machine, Let's do a few tutorial examples in order to learn the basics. For example, how do we get the contents of a text box and place it in another text box?

Place the code shown below in the <body> section of your webpage.

<form>
<input id="c1" type="text" onkeypress="return noenter()" /><br />
Total: <input id="total" type="text" />
</form>

This code creates a simple form with two text boxes. Each text box has a unique id attribute. The onkeypress event of the first text box executes a function named noenter. Place the code for the noenter function, shown below, in the <head> section of your webpage.

<script language="JavaScript">
function noenter() 
{
  if(window.event.keyCode == 13)
  {
    document.getElementById("total").value = document.getElementById("c1").value;
    return false; 
  }
}
</script>

This code creates a Java Script code block containing the noenter function. The if statement within the noenter function checks if the user pressed the keyboard [Enter] key. If they did, the document's getElementById method is used to retrieve the value property of the text box with the id c1, and place it in the value property of the text box with the id total.

-  Note that the noenter function returns false. This prevents the form from being submitted.

RSS Feed RSS Feed



Web Design Sections

Eloquent JavaScript: A Modern Introduction to Programming

Eloquent JavaScript

Eloquent JavaScript Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books and teaches you to write code that's elegant and effective. You'll start with the basics of programming, and learn to use variables, control structures, functions, and data structures. Then you'll dive into the real JavaScript artistry: higher-order functions, closures, and object-oriented programming.

Reader Anthony says, "This book is not your typical Javascript book. Others have a utilitarian approach. In stark contrast, Eloquent JavaScript does not merely provide you a checklist of things to learn but rather paints a panorama of the possibilities that programming provides. Javascript is merely the tool used to introduce these to the reader.

Click here for more information.


[Site User Agreement] [Advertise on This site] [Search This Site] [Contact Form]
Copyright©2001-2011 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268