CODEWITHSUNDEEP
javascript
Opack Odore
Opack Odore

Reputation: 11

Function for addition

I'm creating a website as a small store for personal use, my main question here is how would I code a function for the additon of all of it?

six single check boxes for various types of peripheral devices including printer, monitors, modems or other devices with which you are familiar. Assume the basic computer system price of $500.00 and then add appropriate prices based on user checks.
Monitor 299.99 Printer 129.99 Speakers 49.99 CDRW 159.99 Scanner 129.99 Modem 49.99

If I add just a scanner, my total will be $629.99. If I add a modem and a monitor, my total will be $849.98.

Here is my current progress, I have not added too much JS code yet as I'm unsure of how I would add this function:

<html>
<head>
<title>Problem 9</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// Program name: Problem 9
// Purpose: Program 9 
// Author: Opack
// Date last modified: 2-13-12 
$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);

    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });

    return ret.toFixed(2);
  }

  function setCost() {
    $total.text(calculateCost());
  }

  var $peripherals = $('#peripherals');
  var $total = $('#total');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);

  setCost();

});

</script>
<style>
  h1 {
    font-size: large;
  }
</style>
</head>
<body bgcolor="yellow">
    <h1>What peripherals do you want to add?</h1>
    <form id="peripherals">
        <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
        <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
        <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
        <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
        <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
        <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
        <label for="Cost">Total</label><input type="text" name="Cost" />
    </form>
</body>

</body>
</html>

Upvotes: 1

Views: 1593

Answers (2)

Juho Veps&#228;l&#228;inen
Juho Veps&#228;l&#228;inen

Reputation: 26873

Here's my attempt. I ended up using jQuery and updating the cost automatically. I attached the cost information to "alt" attribute of the checkboxes. It's possible to do this in some other ways as well. Tweak that to suit your purposes.

jQuery code in case jsbin goes bust...

$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);

    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });

    return ret.toFixed(2);
  }

  function setCost() {
    $total.attr('value', calculateCost());
  }

  var $peripherals = $('#peripherals');
  var $total = $('input[name="Cost"]');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);

  setCost();
});

And relevant HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Cost Demo/title>
<style>
  h1 {
    font-size: large;
  }
</style>
</head>
<body>
    <h1>What peripherals do you want to add?</h1>
    <form id="peripherals">
        <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
        <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
        <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
        <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
        <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
        <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
        <label for="Cost">Total</label><input type="text" name="Cost" />
    </form>
</body>
</html>

Upvotes: 0

John Woo
John Woo

Reputation: 263803

Is this homework?

function calculation(a,b)
{
     return a + b;
}

SOURCE

W3Schools: Javascript Operators
W3Schools: Javascript Functions

Upvotes: 1

Related Questions