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">
 
+
 
<input type="text" size="20" maxlength="20" name="number2" value="0">
 
=
 
<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

Code:

<!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´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´ll try not to bother you again.

**susie123** · 09-13-2007, 10:14 AM

Originally Posted by Twey

Code:

<!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´t know what they are / haven´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"

**susie123** · 09-13-2007, 02:37 PM

Thank you djr33 for explaining that to me - it makes it so much clearer now. It´s not the same reading something and then having it explained from someone who has experience.

I did used to search everything on google - that´s 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

Originally Posted by susie123

Thank you for your help so far, I´ll try not to bother you again.

Originally Posted by susie123

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 - it´s a distance-learning course on CD that I´m 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.

It´s 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. I´m sure I´ll 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.

Thread: Simple Adding Calculator - Javascript

Thread Tools

Search Thread

Simple Adding Calculator - Javascript

Bookmarks

Bookmarks

Posting Permissions