PDA

View Full Version : Simple Adding Calculator - Javascript



susie123
09-12-2007, 05:03 PM
Hi. I have a very simple adding calculator to do written in JS. Can anybody please help me fill in the blanks please?

The end result should look like the attached screenshot and on pressing "Calculate", I would like an alert box to appear showing the result.

The code must be the simplest possible and MUST include the parseInt() function.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Assignment 2 - Exercise 3</title>
</head>

<body>

<script language="JavaScript">

var greeting;
greeting = "Hello. Please enter the numbers you would like added together.";
window.alert(greeting);

var myInt;
var myFloat;

myInt = parseInt(number1);
document.write(" ????????? ");

myFloat = parseFloat(number2);
document.write(" ????????? ");
</script>

<table width="45%" align="left" border="2" cellpadding="8">
<tr>
<td>
<h1>The Adding Calculator! </h1>

<form name="form1">
Enter some numbers in these boxes:

<center>
<p>

<input type="text" size="20" maxlength="20" name="number1" value="0">
&nbsp;
+
&nbsp;
<input type="text" size="20" maxlength="20" name="number2" value="0">
&nbsp;
=
&nbsp;
<input type="button" name="calculate" value="CALCULATE" onClick=" ???????????? ">

</form>
</center>

</td></tr>
</table>

</body>
</html>

Thank you as always. s

Twey
09-12-2007, 05:11 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Adding Calculator</title>
</head>
<body>
<h1>The Adding Calculator</h1>
<div>
<form action="" onsubmit="this.elements.total.value = +this.elements.n1.value + (+this.elements.n2.value);">
<label>
First number:
<input type="text" name="n1">
</label>
<label>
Second number:
<input type="text" name="n2">
</label>
<label>
Total:
<input type="text" name="total">
</label>
<input type="submit" value="Calculate">
</form>
</div>
</body>
</html>

boogyman
09-12-2007, 05:27 PM
you probably should read in your book to figure out these homework problems. coming here and having someone else writing a script for you will not make you learn what you are doing, it will only show you one of many possible solutions. if you have a specific question about something that is one thing, but having one of us consistently do your homework will not benefit you in any way.

susie123
09-13-2007, 10:11 AM
Yes, I understand your point but I wouldn&#180;t come here in the first place if I could understand my book. Believe it or not, I do spend hours trying to work it out myself before coming on here and asking for help. Thank you for your help so far, I&#180;ll try not to bother you again.

susie123
09-13-2007, 10:14 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Adding Calculator</title>
</head>
<body>
<h1>The Adding Calculator</h1>
<div>
<form action="" onsubmit="this.elements.total.value = +this.elements.n1.value + (+this.elements.n2.value);">
<label>
First number:
<input type="text" name="n1">
</label>
<label>
Second number:
<input type="text" name="n2">
</label>
<label>
Total:
<input type="text" name="total">
</label>
<input type="submit" value="Calculate">
</form>
</div>
</body>
</html>
Twey, is there a way it will work without using the DIV and LABEL tags? I don&#180;t know what they are / haven&#180;t studied those yet. Thank you.

djr33
09-13-2007, 11:34 AM
div = division, a separate region on the page.
They don't affect functionality, unless they relate to a script in some way, such as being a region in which something is displayed.
In this case, it's just an organized way to form the page.

label is a tag that surrounds text and a form element.
<label>click me<input type="textbox"></label>, for example.
if you click "click me", the checkbox will select, like if you had clicked in the box itself.
Above, there is no specific functionality for the tags, but they are a good way to assign.... a label. The layout/style can be customized easily with CSS, such as if the labels on the page should be bold.
Labels also, in some cases, may bring focus (the state of being active) to a form element in some cases. Not entirely sure on that.


In short, no, those aren't required for the script at all. (But you'll have to be careful to remove them properly if you choose to do so.)

It's completely understandable that you are just starting out and this stuff can be confusing at first. However, for such basic questions, you really should be able to look them up on google.
With html, javascript, etc., each tag (or property in JS) has a specific function. <p> has a specific function. And so would <abcdef>.

the w3schools site is quite good for tutorials and reference. I suggest starting there.
http://w3schools.com/



EDIT: Stupid typo. "screen" before should have been "script" :p

susie123
09-13-2007, 02:37 PM
Thank you djr33 for explaining that to me - it makes it so much clearer now. Its not the same reading something and then having it explained from someone who has experience.

I did used to search everything on google - thats how I came across this site, decided it was the best resource I could find and stuck with it.

I will try not to use it so much from now on though.

Thanks again. S

boogyman
09-13-2007, 02:47 PM
Thank you for your help so far, I&#180;ll try not to bother you again.

I will try not to use it so much from now on though.
its not that we do not want to help you, so please do not think that. its just that if this is an assignment for school, we shouldn't be giving you the whole solution, but rather helping ammend your code or explain as djr did the concepts behind the solution and that way you can understand them more thoroughly which would enable you to learn the material and also get your work done on time.

if you are having trouble understanding some of the concepts you also might want to talk to your teacher / professor... that is their job, to help you understand the concepts behind the techniques you are learning. there are many very knowledgable persons here who are willing to help, otherwise we wouldn't be here, so please do not be discouraged of coming back.

susie123
09-13-2007, 03:13 PM
Ok Boogyman, thank you. The problem I have is there is no teacher - its a distance-learning course on CD that Im following on my own (want a change of career at 34) and I seem to get answers back a lot quicker from this site than from the email contact I have for the course.

I really do appreciate all the help from all of you.

Its strange - I have one of those minds that can pick up languages (the spoken kind) pretty quickly but when it comes to anything mathematical, all sense disappears. Im sure Ill get used to it though.

Thanks again

S

boogyman
09-13-2007, 03:20 PM
i am just the opposite. I am good with numbers and science, however when it comes to spoken languages, I cannot retain the information as quickly or thoroughly. anyway good luck with your new career.

susie123
09-13-2007, 03:44 PM
Hello again Twey. Ive just read through the code you gave me again and I notice that there is no "parseInt()" function written. As mentioned in my original problem, I need to include this. If you could be so kind as to give me a hint on where I might use it? If I dont hear back, I will understand that youre too busy. Thank you again.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Adding Calculator</title>
</head>
<body>
<h1>The Adding Calculator</h1>
<div>
<form action="" onsubmit="this.elements.total.value = +this.elements.n1.value + (+this.elements.n2.value);">
<label>
First number:
<input type="text" name="n1">
</label>
<label>
Second number:
<input type="text" name="n2">
</label>
<label>
Total:
<input type="text" name="total">
</label>
<input type="submit" value="Calculate">
</form>
</div>
</body>
</html>

boogyman
09-13-2007, 04:05 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Adding Calculator</title>
</head>
<body>
<h1>The Adding Calculator</h1>
<div>
<form action="" onsubmit="this.elements.total.value = +this.elements.n1.parseInt(value) + (+this.elements.n2.parseInt(value));">
<label>
First number:
<input type="text" name="n1">
</label>
<label>
Second number:
<input type="text" name="n2">
</label>
<label>
Total:
<input type="text" name="total">
</label>
<input type="submit" value="Calculate">
</form>
</div>
</body>
</html>

djr33
09-13-2007, 04:15 PM
I did used to search everything on google - that&#180;s how I came across this site, decided it was the best resource I could find and stuck with it.
Completely understandable.

However, realize the two sides to web design/coding:
1. Creative
2. Technical

Every day, I look up some function. There are just way too many to remember, with way too many properties. No one can keep up. (Well, perhaps Twey can :p... hmm? Ha. Or John. Anyway...)

The technical stuff is easy, once you get to a point where you can understand it (should happen soon for you).

The next part comes with experience. What works how, and what's the best approach to troubleshoot, etc. That's where we can be of help, frequently.
Standards, efficiency, etc., are something that must be learned. Not very easy to google at times, as well.

Twey
09-13-2007, 04:33 PM
Hello again Twey. I&#180;ve just read through the code you gave me again and I notice that there is no "parseInt()" function written. As mentioned in my original problem, I need to include this.If it makes you happy, you can think of the (+n) form as being equivalent to parseInt(n, 10). They serve the same function in this case, but +n is quicker to write and more efficient to run.
+this.elements.n1.parseInt(value)No. That would be parseInt(this.elements.n1.value, 10).
Every day, I look up some function. There are just way too many to remember, with way too many properties. No one can keep up. (Well, perhaps Twey can :p... hmm? Ha. Or John. Anyway...)I don't tend to use references very often any more. When I need to remind myself of the syntax or effects of a particular function (which I do still need to do for some of the array functions that I don't use as often as I ought, like .slice() and .splice()), I usually just try it and see in my command-line Javascript shell. I still make moderate use of CSS references when designing any non-trivial layout, since it's harder to test. The PHP interactive interpreter is a lot less friendly, too, and PHP functions have stupidly irregular names and parameter orders that I can never remember, so I refer to the php.net API references heavily.

Just to throw a spanner in your theory, I pick up both human and computer languages pretty well, but I'm hopeless at maths. :)

djr33
09-13-2007, 04:57 PM
I'm good with language and with math.
I'm also very creative. Though I wouldn't say I excel at figurative meanings in literature/poetry :p
I also am not very musical (I don't play an instrument and I don't really listen to music, but I do like some music).


As for PHP, yeah. That's actually what I meant mostly. Used to html by now.

susie123
09-13-2007, 05:10 PM
Well, thank you again. Its really interesting to hear the experiences of the experienced!

And the spanner, well, that just shows me that if were both terrible at maths, there must be some hope for me after all when it comes to Javascript.

Ive not got to the part of my course yet that deals with CSS or PHP... heaven help me!

Have a lovely evening everyone! :)

Neebski
09-13-2007, 07:14 PM
Hah, thanks for the code - change it up a little for my project

http://ccms.mediared.net/a/cc/cc.php?n1=&n2=&total=

djr33
09-13-2007, 07:29 PM
<form action="" onSubmit="this.elements.total.value = +this.elements.n1.value + (+this.elements.n2.value); return false;">

That will make the page not submit, which is a bit weird.

You SHOULD have a backup server side solution, so that it works if the user doesn't have javascript installed.

You could do that easily with PHP like this:
<input type="text" value="<?php echo $_POST['field1']+$_POST['field2']; ?>">


EDIT: Hmm.. nevermind. Looks like you do have this setup already. Try return false, and that should make it all work.

Twey
09-14-2007, 05:18 AM
Whoops, yes, I forgot to return false. Silly me.