Doing simple math - Javascript

Johnny

I'm creating a Web page on which I want to do some math, and I'm pretty
sure it's best don with Javascript, but I have no idea where to get
started. Here's the deal.

I want to allow the user to enter a number and click "Go," at which
point a table would be updated to show the result of multiplying that
number by certain constants.

For example, if the user enters 20, the table would multiply 20 by the
constant $10.00 and display the product, $200.00, in the appropriate
cell. The table would also multiply 20 by the constant $5.00 and display
that product, $100.00, in its appropriate cell. This needs to take place
in a total of four cells, so the result would be four new products based
on the multiplier of 20.

If the user then entered, say, 30, all of the four cells would be
updated to show the product of each constant multiplied by 30 instead of
20.

You can see how I hope to implement this idea at
http://teelinstitute.org/suledo/cost...forms_test.htm. The table
is meant to look more or less like it would if the user could choose any
multiplier. The list of four constants is shown in the "per student"
column.

If you have any ideas I'd appreciate knowing them, and thanks.

--Johnny
johnnyg aattssiiggnn kc.rr.com

Jul 23 '05 #1

Subscribe Post Reply

1516

Vincent van Beveren

> I want to allow the user to enter a number and click "Go," at which

point a table would be updated to show the result of multiplying that
number by certain constants.

Yes, this can be done with JS.

There a few key elements you need to use.

First you need to make an input in HTML:

<INPUT TYPE="TEXT" SIZE="4" ID="students" VALUE="">
<INPUT TYPE="BUTTON" VALUE=" Ok " onClick="calc();">

Notice how onClick calls a JavaScript function 'calc'. We'll get back to
that later.

Now you need to assign some parts in the document where the content
will be dynamically changed. You can do this in several ways, I usually
do it by assiging an ID to it. In your case the following might be
the easiest:

<td align="right">
<font face="Courier">
<span id="kCell">$0</span>
</font>
</td>

Now you need to assign a unique ID to each element you want to change
dynamically.

So, maybe kCell, 1stCell etc...

but it can basically be anything you want.

Now you need to write some JavaScript. usually this would be located
between the head tags.

<HEAD> ... other content...
<SCRIPT LANGUAGE="JavaScript">

.. code comes here ..

</SCRIPT>
</HEAD>

We need to write the function calc between the script tags, that is
declared in the following way:
function calc()
{
.. calculation comes here ..
}

first thing is to retrieve the value of the amount. I usually do this
with

document.getElementById('students').value;

in which document has a function getElementById in which I can request
a element in the document by its ID. Now we need to have the value of
that element, thus comes the statement down here.

stud = docment.getElementById('students').value;

Puts the number in the stud variable.

The rest is not too complecated, for each element, do the following
with the correct variables and multipliers.

document.getElementById('kCell').innerHTML='$'+(st ud*10)+'.00';

And you should have your working page. If you have any questions let me
know.

Good luck,
Vincent

Jul 23 '05 #2

Johnny

Thanks for all the time you took to educate me. I learned a lot.
"Vincent van Beveren" <vi*****@provident.remove.this.nl> wrote in
message news:40**********************@news.xs4all.nl...

I want to allow the user to enter a number and click "Go," at which
> point a table would be updated to show the result of multiplying that > number by certain constants.

Yes, this can be done with JS.

There a few key elements you need to use.

First you need to make an input in HTML:

<INPUT TYPE="TEXT" SIZE="4" ID="students" VALUE="">
<INPUT TYPE="BUTTON" VALUE=" Ok " onClick="calc();">

Notice how onClick calls a JavaScript function 'calc'. We'll get back

to that later.

Now you need to assign some parts in the document where the content
will be dynamically changed. You can do this in several ways, I usually do it by assiging an ID to it. In your case the following might be
the easiest:

<td align="right">
<font face="Courier">
<span id="kCell">$0</span>
</font>
</td>

Now you need to assign a unique ID to each element you want to change
dynamically.

So, maybe kCell, 1stCell etc...

but it can basically be anything you want.

Now you need to write some JavaScript. usually this would be located
between the head tags.

<HEAD> ... other content...
<SCRIPT LANGUAGE="JavaScript">

.. code comes here ..

</SCRIPT>
</HEAD>

We need to write the function calc between the script tags, that is
declared in the following way:
function calc()
{
.. calculation comes here ..
}

first thing is to retrieve the value of the amount. I usually do this
with

document.getElementById('students').value;

in which document has a function getElementById in which I can request
a element in the document by its ID. Now we need to have the value of
that element, thus comes the statement down here.

stud = docment.getElementById('students').value;

Puts the number in the stud variable.

The rest is not too complecated, for each element, do the following
with the correct variables and multipliers.

document.getElementById('kCell').innerHTML='$'+(st ud*10)+'.00';

And you should have your working page. If you have any questions let me know.

Good luck,
Vincent

Jul 23 '05 #3

Similar topics

simple recursion help

by: drs | last post by:

Hi, I am trying to find all lists of length x with elements a, b, and c. To this end, I have created the class below, but it is not quite working and I am having trouble figuring out what to...

Python

Data conversion,a simple but strange problem,please help!

by: Webdiyer | last post by:

Hi, We all know that the return value of Math.Log(8,2) is 3,but how about (int)Math.Log(8,2)? On my machine,the return value of (int)Math.Log(8,2) is strange enough! it's not 3 but 2 ! I've...

C# / C Sharp

simple n00b setTimeout or onload problem

by: vezquex | last post by:

What I want is an element with a shifting background image: <html><head> <script type="text/javascript"> var x = 0 var y = 0 inc = 4 function bgWander(el){ x = x +...

Javascript

Submitting to a php form handler with only a simple hyperlink

by: macklin01 | last post by:

Hi, everybody. I'm trying to do some last cleaning up on the following php page I wrote: http://www.math.uci.edu/~pmacklin/Publications.php This URL parses an XML file of publications: ...

PHP

Doing date/time + TZ math in python

by: Joshua J. Kugler | last post by:

I've read docs (datetime, time, pytz, mx.DateTime), googled, and experimented. I still don't know how to accomplish what I want to accomplish. I'm loading up a bunch of date/time data that I...

Python

How to write this simple program? converting to numbers???

by: Ron | last post by:

I want to calculate the surface area of a sphere from an inputed radius with option strict on. I guess I am not converting something correctly. Here is what I am doing: I have a textbox...

Visual Basic .NET

simple script inserted in websurvey software works in firefox but not in internet explorer

by: gray_slp | last post by:

I am designing a web survey using surveymonkey.com and discovered I could use javascript to modify their standard question formats much the same as can be done in myspace. I used this feature to...

Javascript

Please explain what I'm doing wrong...

by: SirG | last post by:

I'm looking for an explanation of why one piece of code works and another does not. I have to warn you that this is the first piece of Javascript I've ever written, so if there is a better way or a...

Javascript

Javascript & Firefox: simple code don't executed

by: giordan | last post by:

Hi all! I've wrote this code: <script type="text/javascript"> var largImg; var altImg; var txtTop = '<b>Ottima scelta!</b> Ora compila il form e premi "Ricevi banner". Il...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware