Doing simple math

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Johnny
    #1

    Doing simple math

    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


    Tags: None
    • Vincent van Beveren
      #2
      Re: Doing simple math

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


      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="JavaS cript">

      .. 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.getEle mentById('stude nts').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.getElem entById('studen ts').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.getEle mentById('kCell ').innerHTML='$ '+(stud*10)+'.0 0';

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

      Good luck,
      Vincent



        Comment

        • Johnny
          #3
          Re: Doing simple math

          Thanks for all the time you took to educate me. I learned a lot.


          "Vincent van Beveren" <vincent@provid ent.remove.this .nl> wrote in
          message news:40dbd58e$0 $6968$e4fe514c@ news.xs4all.nl. ..[color=blue][color=green]
          > > 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[/color][/color]
          that[color=blue][color=green]
          > > number by certain constants.[/color]
          >
          >
          > 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[/color]
          to[color=blue]
          > 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[/color]
          usually[color=blue]
          > 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="JavaS cript">
          >
          > .. 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.getEle mentById('stude nts').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.getElem entById('studen ts').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.getEle mentById('kCell ').innerHTML='$ '+(stud*10)+'.0 0';
          >
          > And you should have your working page. If you have any questions let[/color]
          me[color=blue]
          > know.
          >
          > Good luck,
          > Vincent
          >
          >
          >[/color]


            Comment

            Previous template Next
            Working...