/    Sign up×
Community /Pin to ProfileBookmark

New to JS. Very new. Need some help with this simple script.

Copy linkTweet thisAlerts:
Apr 01.2012

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”

“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();
{
if (price <= 25);
shipping = 1.50 ;
shipping = (price *(10/100);
}
/* ]]> */
</script>
</head>

<body>

<script type=”text/javascript”>
/* <![CDATA[ */

document.write(“Purchase price and shipping total”);
/* ]]> */
</script>

<script type=”text/javascript”>
/* <![CDATA[ */
var price=prompt(“What is the purchase price?”);

function calcShipping();
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>

</body>
</html>

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JavaMonauthorApr 01.2012 — I am having trouble figuring out how to add the text box and link that to the JavaScript.
Copy linkTweet thisAlerts:
@PadonakApr 01.2012 — [CODE]<!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">
function calcShipping(){
var price=new Number(document.getElementById('pr').value);
if(price <=0 || price=='' || isNaN(price)==true){alert('Wrong input!');return;}
var fee=0,total_price=0;
if(price <= 25){fee=1.50;total_price=price+fee;}
else{fee=price*10/100;total_price=price+fee;}
alert('Total shipping price is '+total_price+' ('+price+' + '+fee+')');
}
</script>
</head>
<body>
<center>
<br /><br /><br /><br /><br /><br /><br /><br />
<input id="pr" type="text" size="20" style="text-align:center;" value="" /><br /><br /><a href="#null" onclick="calcShipping()">calculate</a>
</center>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@JavaMonauthorApr 01.2012 — Hello I see that you did modify the script a lot but is that advanced? I do not completely understand all of this here

<script type="text/javascript">

function calcShipping(){

var price=new Number(document.getElementById('pr').value);

if(price <=0 || price=='' || isNaN(price)==true){alert('Wrong input!');return;}

var fee=0,total_price=0;

if(price <= 25){fee=1.50;total_price=price+fee;}

else{fee=price*10/100;total_price=price+fee;}

alert('Total shipping price is '+total_price+' ('+price+' + '+fee+')');

}

This is a basic javascript class what is the dumbed down version of this?
Copy linkTweet thisAlerts:
@JavaMonauthorApr 01.2012 — I tried to take what you had and what I had but it does not calculate.

<!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();

{

if (price <= 25);

shipping = 1.50 ;

shipping = (price *(10/100);

}

/* ]]> */

</script>

<script type="text/javascript">

/* <![CDATA[ */

document.write(<p>"Purchase price and shipping total"</p>);

/* ]]> */

</script>

<script type="text/javascript">

/* <![CDATA[ */

var price=new number(document.getelementbyid('pr').value);

function calcShipping();

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>
Copy linkTweet thisAlerts:
@PadonakApr 01.2012 — ok let's see what is wrong with your code:

[CODE]<!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()[COLOR="Red"];[/COLOR]//this is triggering the calcShipping() function but it has not been defined yet!
{
if (price <= 25)[COLOR="Red"];[/COLOR]// 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?!
}
[COLOR="Red"] /* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */[/COLOR]
// you don't need more than one script why do you write 3?!
document.write(<p>"Purchase price and shipping total"</p>);
[COLOR="red"]/* ]]> */
</script>

<script type="text/javascript">
/* <![CDATA[ */[/COLOR]
var price=new [COLOR="Red"]N[/COLOR]umber(document.getelementbyid('pr').value);//we need this to prevent anything but digits in the text field (that's why we check [B]isNaN(price)[/B] and if it is true we stop the script)

function calcShipping()[COLOR="red"];[/COLOR]//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>[/CODE]

now let's see what's goin on in my script:

[CODE]<script type="text/javascript">
[COLOR="SeaGreen"]//here goes the calcShipping function[/COLOR]
function calcShipping(){
[COLOR="SeaGreen"]//first we take the value of our text field and create a [B]new Number[/B] with this value[/COLOR]
var price=new Number(document.getElementById('pr').value);
[COLOR="SeaGreen"]//now we're going to check [B]price[/B] and decide can we calculate anything or not[/COLOR]
if(price <=0 || price=='' || isNaN(price)==true){alert('Wrong input!');return;}
[COLOR="SeaGreen"]//[B]if price <= 0[/B] we can't calculate because this is absurd - we are here to sell goods ;-))
//[B]if price==''[/B] this means that the user sent us an empty textfield so we can't calculate again
//[B]isNaN(price)==true[/B] this means that the user sent us letters or some bull**** else and we can't calculate aswell
// [B]||[/B] checks these 3 conditions one by one and if the current condition is true shows [B]alert('Wrong input!');[/B] and stops the futher function [B]return;[/B][/COLOR]
[COLOR="SeaGreen"]//if everything is OK we define 2 variables [B]fee[/B] and [B]total_price[/B] which are numeric both[/COLOR]
var fee=0,total_price=0;
[COLOR="SeaGreen"]//now we check if [B]price <= 25[/B] and if so [B]fee=1.50;total_price=price+fee;[/B][/COLOR]
if(price <= 25){fee=1.50;total_price=price+fee;}
[COLOR="SeaGreen"]//if the previous check was not true and the [B]price[/B] is above $25 we take 10% and calculate the [B]total_price[/B][/COLOR]
else{fee=price*10/100;total_price=price+fee;}
[COLOR="SeaGreen"]//and finally we alert the result[/COLOR]
alert('Total shipping price is '+total_price+' ('+price+' + '+fee+')');
}[/CODE]

sorry i'm not that good in the English language but i hope you'll understand my comments
×

Success!

Help @JavaMon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...