How Do You Make A Javascript Calculator?

DjLuki

Feb 28 2007, 03:47 AM

Hi, does anyone know how you would make a html form with javascript where it calculates number... i will demonstrate below to make it more clear what i mean..

i want the form to have like three buttons, MULTIPLY,DIVIDE. AND RESET.. and than i want it to have the fields where you type in the numbers and it gives you the answer.. so its Field 1 * OR / Field 2 = Field 3 . does anyone know how to make this work? i basiaclly want all the three functions to work with the same form. this is a project grade in my web design class but i need help.
Thanks

Comment/Reply (w/o sign-up)

darran

Feb 28 2007, 07:35 AM

With this do you mean you want to create everything from javascript or create a standard form using normal HTML tags and then making use of Javascript to actually compute the values the user enters in.

If I am not wrong, you are also trying to integrate an AJAX function into this form too? Since you want to have the fields where you type in the numbers and it gives you the answer. So after a user types in a value, it will compute automatically and display in the results field.

Comment/Reply (w/o sign-up)

saga

Feb 28 2007, 07:44 AM

CODE

<html>
<head>
    <script type="text/javascript">
    
    </script>
</head>
<body>
<br />Field 1<input type="text" id="field1" />
<br />Field 2<input type="text" id="field2" />
<br />Field 3<input type="text" id="field3" />
<br /><input type="button" value="Multiply" onclick="process('multiply')" />
<input type="button" value="Divide" onclick="process('divide')" />
<input type="button" value="Reset" onclick="process('reset')" />
</body>
</html>

I hope that this one will work for you.... that is if i get you correctly..

this kind of calculator will have errors on it.. like what happened if the user will input letters instead of numbers..

you can have a validator that will check if the given field is correct or not..

but the best way is to make 0 - 9 buttons that the user will click... the idea is a calculator like the calculator provided by microsoft...

Comment/Reply (w/o sign-up)

darran

Feb 28 2007, 08:30 AM

So this is a standard form then. And you are only trying to validate the fields the user enters in?

Well you could do the basic validation like checking for empty fields. Make use of the getElementById and use the value field to check for any empty strings submitted by the user. You can also use the isNaN(value) function to check whether it is a number or not. I think ultimately, this is what you are looking at since it is a calculator, it has to deal with numbers and not Strings. So also remember to convert them into integer or whatever depending on your needs.

Hope I have helped you

Comment/Reply (w/o sign-up)

DjLuki

Feb 28 2007, 01:06 PM

yeah, i have to put the ELSE functions as well, like when somebody leaves something blank or writes a letter instead of number a message window appear...i am going to try and do this myself, but you can post it here if you know how. it makes my life easier

Comment/Reply (w/o sign-up)

DjLuki

Feb 28 2007, 03:14 PM

Ok, i need help with the validations to, i tried but couldn't get it to work.. anyone know how to get the error windows to pop up?

Comment/Reply (w/o sign-up)

Imtay22

Feb 28 2007, 09:40 PM

JavaScript and HTML calc- Used saga's code.

I used sagas code to make this calc.

~Tay

Comment/Reply (w/o sign-up)

DjLuki

Mar 1 2007, 03:46 AM

yea i got the calculator working, im talking about something else no.. the validations now. i can't get those to work.

Comment/Reply (w/o sign-up)

saga

Mar 1 2007, 03:49 AM

Ok here is the whole HTML and Javascript code for a calculator with a validation... its the same code from the one I posted before but I added one function.. isNumber(str) .. which is used to validate the entered string.

CODE

<html>
<head>
    <script type="text/javascript">
    
    </script>
</head>
<body>
<br />Field 1<input type="text" id="field1" />
<br />Field 2<input type="text" id="field2" />
<br />Field 3<input type="text" id="field3" />
<br /><input type="button" value="Multiply" onclick="process('multiply')" />
<input type="button" value="Divide" onclick="process('divide')" />
<input type="button" value="Reset" onclick="process('reset')" />
</body>
</html>

Explaination on the validator:

First and foremost, the ASCII code for the characters 0 to 9 is 48 to 57, the period (.) is 46 and the dash (minus sign) is 45. I used the character code in my condition instead of the actual characters becuase its much more easy and straight forward.

the variables

var numDash;
var numPeriod;
var numNumeric;

are used to count how manu dashes, periods and numeric characted in the string. This is useful since the string migt contain more than 1 dash (negative sign) or more than 1 period (floating point) which must not be the case. There is also a need to count the number of numeric characters since the string might contain only a dash (- ) or a period (-). The numNumeric variable is used to check that there must be at least one numeric character in the string.

the process of validating the string begins in the for..loop. The loop scans the whole string one character at a time. Every character is checked.

If the character is numeric then
the numNumeric variable is incremented by one.

if the character is a minus sign (-) then
numDash variable is increment by one
if numDash is greater than 1 which means there is more than 1 dash in the string then
the function exit and return value of false signifying that the given string is not a valid number
if the position of the minus (-) is not in the begining of the string ( at index 0) then
the function exit and return a value of false since the minus sign must of course be in the begining

if the character is a period (. ) then
numPeriod varible is inrecmented by one
if numPeriod is greater than 1 meaning more than one decimal piont which is not allowed in a number then
the function exit and return the value of false signifying that the given string is not a valid number

if the 3 condition above is not executed then it only means that the character is not a valid character then
the function exit and return the value of false signifying that the given string is not a valid number

after the loop finnishes from running the numNumeric is then check if it is greater than 0 becuase if it is not then
the function exit and return the value of false signifying that the given string is not a valid number

If the condition above evaluated that a character is not valid then the last code

return true;

which means that the string is a valid number will not be exucted

Sorry for the long discussion, its a good way to practice my english

Comment/Reply (w/o sign-up)

darran

Mar 3 2007, 12:07 PM

This is a very long description of your program, but honestly, I am too lazy to go through all that. I would very much like to try out this calculator you have created and who knows maybe there are some bugs which you can solve to make it even better than it is. Is it hosted on any url?

Comment/Reply (w/o sign-up)

Latest Entries

nirmal_1288

Jun 8 2007, 06:00 AM

hi friend

THis is an excallent calculator written in javascript.....

CODE

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"   NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  c  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

Comment/Reply (w/o sign-up)

Similar Topics

Keywords : Javascript Calculator

Javascript Slideshow Tutorial - How to make a slideshow in JavaScript (7)
JavaScript Slideshow Tutorial I'm going to show you how to make a impressive JavaScript
slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript?
There are a number of reasons. First, you don't have to build a new HTML page for each picture.
Secondly, the page will load much faster because the of the compactness of the page. Ok let's
get started with this example. First we'll add a tag in the of our HTML document. In that
script tag we will build the following: CODE first = 1; last = 4; ...

Javascript Game - Free online dice game called "Greedy" (6)

What's The Relationship Between Javascript And Java - are they the same or different (7)

I think most of you always confuse about java and javascript .So I make this topic to talk about it.
Javascript and Java ,they have the same first four letter. Java and Javascript is the two language
is very popular in the web world.Java is the general-purpose programming language that you can
create an application or an applet.Javascript is a script language that looks sort of like java;with
it you can do various nifty things in web pages.They are independent languages ,used for different
purposes.If you are interesting in creating a website you should learn how to w...

Document.write & Noscript Questions (javascript) - (2)

I am trying to use javascript to include a stylesheet depending on the user's resolution. The
HTML CODE " /> id) { initEditor(); } ?> if
(screen.width>=1050) { document.write(' '); } I'm running into two
problems. 1) The script doesn't seem to be writing anything. Fixed 2) The tags cause all
sorts of validation errors. From what I've read it seems as though the tag is not allowed
within the section -- is this correct? Could the same thing be accomplished just putting the
default style...

Re-learning Javascript - (3)

As rusty as I was with ActionScript when I started my new job, I'm even rustier at JavaScript.
I'm trying to generate a new div on a webpage, containing an html file that (at the moment)
holds only a simple .gif image. The page looks like this at the moment: function
creatediv(id, html, width, height, left, top) { var newdiv =
document.createElement('div'); newdiv.setAttribute('id', id); if (width)
{ newdiv.style.width = 300; } if (height) { newdiv.style.height = 250; }
if ((left || ...

Need Help With Javascript Drag And Drop Script - Having trouble with javascript drag and drop script. (2)

hi, i have been trying to create a drag and drop menu for my new website, so that the navigation
menu can be moved around the site. This is the code i have: CODE Test run - Right click
menu function coordinates(event) { if (event.button==2) { var x=event.x; var y=event.y; }
document.getElementById("element").style.left=x; document.getElementById("element").style.top=y;
document.getElementById("element").style.visibility="visible"; var oldx=x; var oldy=y;
window.onmouseup=end(); window.onmousemove=coordinates(event); } function end() { } #el...

Javascript Close Window - Javascript close window (15)

Hi does anyone have a code to close the browser window. This code needs to be used to close an
actual full sized window, not a pop-up window....

Adding Rows & Columns In Html Table Using Javascript - (1)

I'm trying to create a website with a form that collects some user information to store in MySQL
database. However, I've a problem when I want to dynamically add new rows and columns in the
HTML table so that the user can add more information in the dynamically added textboxes. Here's
what I have: CODE
                    Quantity
                    unit(s)
             ...

Adjusting Rows/cols Of Frames In Frameset Using Javascript Is Not Working In Firefox 3 Is Not Working - (4)

I am not able to adjust frames length/width in a frameset using java script functions I am using
firefox 3. In below code changerows is not working for me. Where as same is working in IE6.
Please help me in resolving this issue. Note: here frameset1 is the name given to the FRAMESET.
CODE function changeRows() { parent.frameset1.rows="30%,70%" }function restoreRows() {
parent.frameset1.rows="50%,50%" } ...

Java Vs Javascript - (11)

I thought they were completely different things. Surely javascript should be seperated from the rest...

Javascript : No Right Click Script !@ - This script will allow you to protect your source coad ! (12)

This script will help you to protect your source code Add this to Section of your site !
HTML var message="Function Disabled!"; /////////////////////////////////// function
clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if
(document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){
alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmoused...

Hiding <div> Boxes With Javascript - Javascript Help #1 (8)

This is my first help post in this Java/JavaScript section. Can someone write/find me a piece of
code that will hide boxes? Preferred stuff: There is a bar that has the subtitle of the box
contents. A button on the right side of the bar shows and hides the div box. Contents are in a box
with a border and slides in and out of the bar smoothly and relatively quickly. Box MUST be
customizable using CSS internal/external stylesheets . Any help would be appreciated. All codes
will be tested and best code be selected....

Flash And Javascript Interaction - swfobject js questions (1)

I don't know if anyone on here is familiar with this script. You can check it out here .
Basically it's a script that is supposed to give you javascript control over a flash object. I
am using it for a flv player. My question is this. I would like to display the current file's
title in a span element on the page, but the function described to gather the information for the
current file doesn't seem to work for me. The function, as outlined on on this page looks
like this: CODE function getUpdate(typ,pr1,pr2,swf) { if(typ == 'state'...

One Click Copy And Paste To Clipboard - in simple Javascript (5)

I've been search the web for few weeks to see if Java can do one click copy and paste function
to the clipboard and then I can just Ctrl-V the copied "texts." I initially got this idea when I
began to approve hosting application. Instead of writing the same message over and over again, I
decided to make me a page where I can simply copy the code to appropriate answers. And seems like my
laziness is the mother of inventions /laugh.gif' border='0' style='vertical-align:middle'
alt='laugh.gif' /> Instead of doing Ctrl-A, Ctrl-C then Ctrl-V to the post board I started...

Capturing Username Of Computer - using javascript, is it possible? (3)

I wondering if it is possible to try and make a java script to get the computer username and log it?
/huh.gif" style="vertical-align:middle" emoid=":huh:" border="0" alt="huh.gif" /> edit Topic
title ...

Javascript Object Node Referencing Help - (5)

I've got two buttons with an onclick event to set the hidden input field to a certain value then
continue submitting the form. I have more than one form on display on the page and I don't want
to use ids. Is there a way I can reference it from the button/button onclick event? the forms is
laid out like this echo" "; echo" "; echo" Edit "; echo" Delete "; echo" ";
So basically the idea is to fire off new_modify function and start referencing the hidden input type
with name of do and set it to the supplied argument then continue submitting t...

Is It Possible To Create A Web Based Mmo In Javascript? - And could there be free movement without reloading the page? (4)

I would like to get some information before launching myself to the JS libraries. Is it possible to
load maps or images and with the press of a button "scroll" or move the image inside some kind of
window up, down, left or right? It would be like scrolling an image sideways, upwards or downwards.
I would also like to know if multiple connections can be made and lets say there was a user
standing in the location (127, 160) of the map, would there be the possibility of loading the image
of that player? Maybe with database connections and storing their information there?...

Javascript Error - Error "missing ) in parenthetical" with JSON statment (2)

Hello! I'm trying to execute following code: CODE a=new Array();
a=eval("("+responseText+")"); for (prop in a) { e=document.getElementById(prop)
if (e) {e.innerHTML=a } and I recieve error in CODE a=eval("("+responseText+")");
what's wrong? responseText it's result from php2js() function. Apache 2.2.6/PHP5.2.5/MySQL
5.0.45...

I'm Making My Own Javascript Only Rpg :d - earliest beta perhaps (7)

Well I randomly decided to make an rpg. So far its all in javascript, and that's how I intend to
keep it. Eventually you will be able to save with a permanent cookie or by getting an encrypted
code. Right now you can only walk around and go to 2 maps. I have used preloading, and the maps load
extremely fast. But there is one problem, maybe you guys could help but I mostly just posted to tell
you guys something /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif"
/>. Well the problem is the character images load extremely slow and i know wh...

Web Applications: J2ee Or Javascript/css/html - (1)

I'm currently programming web applications using AJAX/CSS/HTML and they're pretty
cross-browser. However when I heard of this language J2EE I had second thoughts. But I ran into GWT
(Google Web Toolkit) which compiles Java code to Javascript/HTML. With this said, my mind tells me
that Java developers desire to use Javascript/HTML languages to create web applications over Java.
So, which one should I start developing web applications in? Java? or Javascript...

I`m New To Javascript. - (5)

Does anybody know where I can find a good site to teach me more than I already know. I know about
functions and how to set up alert scripts. I really wanna make a counter script....

Special Wii Javascript - New Javascript Objects for Wii (2)

I found on Nintendo.com a while back some new javascript objects dealing with the Wii Remote. I
have decided to post a link to these new Javascript objects here. Wii javascript These new
Javascripts can detect whether or not a Wii Remote is enabled, the position of the pointer, and even
the tilt of the remote. It also has an object that determines the keypress of the Wii. These can be
very useful for Wii sites. Maybe have a menu load with AJAX when the remote is tilted. Add button
functionality such as when the A and B button are pressed, the form is submitted. Just...

Javascript Events Not Working For Ie - (6)

I just made this little html file and I used javascript to show which arrows you're pressing. It
just says the key code, but only for the arrows, so it will say "37, 38, 39, 40" if you're
pushing all the arrows. When you let go of the arrows, it won't show that value. It works
perfectly in Firefox, but I can't get it to run in Internet Explorer. The little notification
bar down in the bottom left of the window says there's an error, and it just sits there. All I
used was a function for onKeyDown and onKeyUp on the body, and every 10 milliseconds it sh...

Javascript - What's Your Browser? - (3)

Here is the code that i picked up from a Javascript book that will tell you wether you are using
Firefox or Internet explorer. obviously the (navigator.appName ==" browser name ") can be changed
to different browsers. CODE          What's your browser?
                 type="text/javascript">                  if (navigator.appName =="Firefox") {
        document.write("You are running a Firefox browser")         }         else {         if
(navigator.appName == "Microsoft Internet Explorer") {         document.write("You are runnin...

Opera Browser + Javascript + Embeded Sound - Embeded sound works in IE, but not in Opera (0)

Hello! Here is the problem. There is an Embed object, created like this: function
createWMPEmbedMarkup(src, id, baseurl) { // For choice, using the DOM instead of a string
// so the caller gets a node. (Its childNode could be used if you don't want the whole p
element) // Then, if markup is needed instead, innerHTML is available. var x =
document.createElement("embed"); x.setAttribute("FileName", src);
x.setAttribute("type", "application/x-mplayer2"); x.setAttribute("AutoStart", "0");
x.setAttribute("id", i...

Great Javascript Script Source - Great Javascript script source (2)

Are you find great javascript source !!! try this >>> http://www.dynamicdrive.com ...

Help With Javascript Calculator Returning "nan" - (2)

Hello all, thought maybe I could get a little help with a problem I was having with some Javascript
on this forum. I recently posted about adding some type of script to my page that calculated a
customers custom computer system price by assigning each form option a dollar value. I have done so,
with a script that seems like it would work, but am having some problems. I feel that I have the
script correctly in place, but when the user selects their computer options a total of "NaN" returns
at the bottom of the page. You can see what I mean here: www.plugcomputers.com/a...

Highlight A Word In Javascript. Help! - BBCode (2)

Hi, I'm making a forum right now, and i'm having some trouble with BBCodes. I want it so
when they click a button it will add the bbcode and highlight (or place the cursor between) the
code . Let me clarify, I want a button to be clicked, it adds code to the textarea and places the
cursor between the tags. Example: CODE (cursor here) | The cursor is between the
two tags. I REALLY appreciate it, i've search so long with no luck....

My Little Javascript - Need Some Debugging Help (0)

Ok, to start, the purpose of the script. I'm trying to make a script that puts a link on every
page on an Invisionfree forum (IPB 1.3) that takes you to a thread and automatically put in the url
from which you clicked. I already have the whole thing working, but when I go to edit my signature,
it inputs most of the url into the box. It replaces my whole sig with that, so it's a big
problem. The code: CODE This part makes the link on every page.
document.write(' '); document.write('Report Topic'); ...

Help With Javascript Calculator On My Website Please! - (1)

Hello all, As many of you may know my website, www.PlugComputers.com is in the business of building
custom gaming computers. I need some help coding one part of my site and I have never been too good
at javascript. First off, I'm assuming what I am wanting to do would be done with
javascript...my problem is as follows: On our build customization pages (
www.PlugComputers.com/intelschedule.php for example) vistors can go though the page and select
which components they want for their computer. The problem is people are selecting things they
really dont know much a...

Looking for doy, uo, make, javascript, calculator, form

How Do You Make A Javascript Calculator? - in a form

How Do You Make A Javascript Calculator? - in a form

Latest Entries