Calling functions and creating specific functions

lostwalker · 09-06-2012, 07:20 AM

Hi. I am new to this forum. I am taking a JavaScript course and am a bit lost. I always get confused what exactly to write in a function to get it to do what I want. My homework assignment asks me to do the following:

Create a web page that allows a user to enter a purchase price into a text box; include a JavaScript function that calculates shipping and handling. Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00. For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee. The formula for calculating a percentage is price * percent / 100. For example, the formula for calculating 10% of a $50.00 purchasse price is 50 * 10 / 100, which results in a shipping and handling fee or $5.00. After you determine the toal cost of the order (purchase plus shipping and handling), display it in an alert dialog box. Save the document as CalcShipping.html.

And this is what I have:

<!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>Project 3-1 Pg. 187</title>

<script type="text/javascript">

/* <![CDATA[ */

function ship_hand (price) {
var price;
var min_fee = 1.50;
var max_fee = (price * 10 / 100);

if ( price <= 25.00)
window.alert ( 'price += min_fee');
else if ( price > 25.00)
window.alert ( 'price += max_fee');

}

/* ]]> */

</script>

</head>

<body>

<form name="calcShipping" action="" method="get">

<p>
Purchase Price: <input type="text" name="price" value="0" onclick="ship_hand()" />
<input type="button" value="View Total" onclick="ship_hand()" />

</p>

</form>

</body>
</html>

* I am mostly confused on how to pass the purchase price entered by the user to the function so that it can calculate the shipping and handling charge. Please help.

devnull69 · 09-06-2012, 08:50 AM

There are a few things that are just wrong as you will soon see.

First of all, there are many ways to retrieve the value from a form field using Javascript. As the button you clicked is still part of the form, you could refer to the price field value by this.form.price.value (this.form is a reference to the form. Every named field is a property of this form element and .value is the value property of this element)

Code:

<input type="button" value="View Total" onclick="ship_hand(this.form.price.value)" />

Your function ship_hand() doesn't look that bad, but

- You must not define a new var price inside your function because you are already passing a defined "price" variable as a parameter. A new definition would overwrite the passed parameter
- The value of a form field is always of type String. So the first thing you need to do if you want to use it for calculation or for comparison with numeric values is to convert it to a number
- You are using string concatenation wrong inside your alert() methods

Code:

function ship_hand (price) {
   price = parseFloat(price);
   var min_fee = 1.50;
   var max_fee = (price * 10 / 100);

   if ( price <= 25.00)
      window.alert ( price + min_fee);
   else
      window.alert ( price + max_fee);
}