New to JS. Very new. Need some help with this simple script.
I am taking a class right now and I want to learn JavaScript because I would love to do this as a career in the future.
The assignment is to 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. Th e formula for calculating
a percentage is price * percent / 100. For example, the formula
for calculating 10% of a $50.00 purchase price is 50 * 10 / 100, which
results in a shipping and handling fee of $5.00. After you determine
the total cost of the order (purchase plus shipping and handling),
display it in an alert dialog box.
Here is what I came up with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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" />
<link rel="stylesheet" href="js_styles.css" type="text/css" />
<title>Week 2 Calculating The Shipping Fees</title>
<script type="text/javascript">
/* <![CDATA[ */
function calcShipping();//this is triggering the calcShipping() function but it has not been defined yet!
{
if (price <= 25);// if(condition){where is what happens if condition exists?!}
shipping = 1.50 ;// this variable has not been defined yet so you must write var shipping here
shipping = (price *(10/100);// if so then what for the previous shipping?!
}
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
// you don't need more than one script why do you write 3?!
document.write(<p>"Purchase price and shipping total"</p>);
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
var price=new Number(document.getelementbyid('pr').value);//we need this to prevent anything but digits in the text field (that's why we check isNaN(price) and if it is true we stop the script)
function calcShipping();//here you are triggering again the function which has never been defined
document.write ("The purchase price is $" " + (price) + ");
document.write ("The cost of shipping is $" " + (shipping) + ");
var total = price + shipping;
document.write("Your total price with shipping is $ " + (total) + ");
/* ]]> */
</script>
</head>
<body>
<input id="pr" type="text" size="20" style="text-align:center;" value="" /><br /><br /><a
href="#null" onclick="calcShipping()">calculate</a>
</body>
</html>
now let's see what's goin on in my script:
Code:
<script type="text/javascript">
//here goes the calcShipping function
function calcShipping(){
//first we take the value of our text field and create a new Number with this value
var price=new Number(document.getElementById('pr').value);
//now we're going to check price and decide can we calculate anything or not
if(price <=0 || price=='' || isNaN(price)==true){alert('Wrong input!');return;}
//if price <= 0 we can't calculate because this is absurd - we are here to sell goods ;-))
//if price=='' this means that the user sent us an empty textfield so we can't calculate again
//isNaN(price)==true this means that the user sent us letters or some bull**** else and we can't calculate aswell
// || checks these 3 conditions one by one and if the current condition is true shows alert('Wrong input!'); and stops the futher function return;
//if everything is OK we define 2 variables fee and total_price which are numeric both
var fee=0,total_price=0;
//now we check if price <= 25 and if so fee=1.50;total_price=price+fee;
if(price <= 25){fee=1.50;total_price=price+fee;}
//if the previous check was not true and the price is above $25 we take 10% and calculate the total_price
else{fee=price*10/100;total_price=price+fee;}
//and finally we alert the result
alert('Total shipping price is '+total_price+' ('+price+' + '+fee+')');
}
sorry i'm not that good in the English language but i hope you'll understand my comments
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
Reply With Quote
Bookmarks