How to Update a Total With JavaScript

Written by steve mcdonnell Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Update a Total With JavaScript
Use JavaScript to sum form element values to create a total. (Hemera Technologies/AbleStock.com/Getty Images)

JavaScript allows you to interact in real time with users because it is a client-side scripting language. For example, you can allow users to enter numbers into an HTML form and update the total of those numbers in real time. To do this, you designate the area where the total should be displayed with an HTML tag and use JavaScript to update that area of the screen when the individual numbers change.

Skill level:
Moderately Challenging

Other People Are Reading

Instructions

  1. 1

    Create a new HTML file that will calculate the total of a shopping list. Insert the main HTML tags as placeholders. For example, type:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Shopping List</title>

    </head>

    <body>

    </body>

    </html>

  2. 2

    Create an HTML inside the "body" tags. Display a table with items and prices and allow the user to enter a quantity for each item. Assign each item a "name" attribute. Run a function to calculate the total each time one of the quantities is changed. For example, type:

    <body>

    <form name="list">

    <table border="0">

    <tr class="header"><td>Quantity</td><td>Item</td><td>Price</td></tr>

    <tr><td><input name="milk" type="text" width="2" onchange="calc()"></td><td>Milk</td><td>1.99</td></tr>

    <tr><td><input name="bread" type="text" width="2" onchange="calc()"></td><td>Bread</td><td>1.29</td></tr>

    <tr><td><input name="eggs" type="text" width="2" onchange="calc()"></td><td>Eggs</td><td>2.99</td></tr>

  3. 3

    Designate the last row of the table as the total row. Place a "div" tag with an "id" attribute where you want the total displayed. For example, type:

    <tr><td> </td><td><strong>Total</strong></td><td><div id="total"></div></td></tr>

    </table>

    </form>

    </body>

  4. 4

    Create the function to calculate the total in JavaScript and place it between the "head" tags. Access each form element by the form name and the input name, and substitute zero if the element is undefined. Multiply the quantity by the price and add the values to derive a total. For example, type:

    <head>

    ...

    <script type="text/JavaScript">

    function calc() {

    var total = (parseInt(document.list.milk.value) || 0)*1.99 + (parseInt(document.list.bread.value) || 0)*1.29 + (parseInt(document.list.eggs.value) || 0)*2.99;
    
  5. 5

    Update the space where the total should be displayed by accessing the "div" element you created and changing the HTML text displayed. For example, type:

    document.getElementById("total").innerHTML = total.toFixed(2);
    

    }

    </script>

    </head>

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.