Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Aug 2012
    Posts
    5
    Member #
    32436
    Can someone please check this code and help me understand why it is not working. I am working on an assignment:

    Many companies normally charge a shipping and handling fee for purchases. 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 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.

    Specifications from instructor:

    • Basic HTML template
    • function in the <head> section
    • form in the <body> section
    • Form needs opening and closing form tags, input text field, and input button with onClick as the event

    When you enter the sales price into the textbox and click on the button, the value will be passed to the function.
    The function will have the following element:
    • opening and closing function syntax
    • declare variable
    • use parseInt to convert the string to an integer
    • if else statement to check the sales price to calculate shipping
    • display sales total via an alert box

    Code:

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

    function calcShipping()
    {
    var purchase = parseInt (document.calcShipping.text.value);
    var shipping;
    if (purchase <= 25.00)
    shipping = 1.50;

    else
    shipping = (purchase * (10 / 100));

    shipping = shipping + purchase;
    window.alert("Your total price is " + shipping)
    }

    /* ]]> */
    </script>
    </head>

    <body>
    <FORM NAME="calcShipping" action="">
    Enter Purchase Price:
    <INPUT TYPE="text" NAME="purchase"><p>
    <INPUT TYPE="button"
    VALUE="Submit"
    onClick="calcShipping(document.calcShipping.text.v alue)">
    </FORM>

    I dont get it....I am unable to get the alert box when the total is calculated. Or actually, I don't even think it is calculating because when I submit the information it doesnt do anything.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    calcShipping is the name of your function and your form. Change one for starters...doesn't matter which one, but change one.

    Second, you're passing a value to the calcShipping function that you're not receiving in turn (you receive it by using a variable name inside of the brackets e.g. purchasePrice).

    Third, what you want isn't text.value. Text is your field type. What you want is purchase.value, since purchase is the name of your field.

    There are some other things that are going on, but this should get you started.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Aug 2012
    Posts
    5
    Member #
    32436
    Thanks for the reply. I have updated the code as you suggested.
    <script type="text/javascript">
    /* <![CDATA[ */

    function calcShipping()
    {
    var purchase = parseInt (document.purchasePrice.purchase.value);
    var shipping;
    if (purchase <= 25.00)
    shipping = 1.50;

    else
    shipping = (purchase * (10 / 100));

    shipping = shipping + purchase;
    window.alert("Your total price is " + shipping)
    }

    /* ]]> */
    </script>
    </head>

    <body>
    <FORM NAME="purchasePrice" action="">
    Enter Purchase Price:
    <INPUT TYPE="text" NAME="purchase"><p>
    <INPUT TYPE="button"
    VALUE="Submit"
    onClick="purchasePrice(document.purchasePrice.purc hase.value)">
    </FORM>

    So can you tell me why my alert box is not working? And thank you again for your guidance. This is so new to me and it is totally throwing me for a loop. I have read through chapters, used tutorials, but I cannot seem to grasp this. Any and all help is greatly appreciated!

  5. #4
    Junior Member
    Join Date
    Aug 2012
    Posts
    5
    Member #
    32436
    And looking at this further with what you explained, it seems I need to remove 'purchasePrice' from my form path. Should it be (document.purchase.value)?

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Well, you're getting there. Let's start with your onClick handler, though:

    onClick="purchasePrice(document.purchasePrice.purchase.value)">

    Your function is called calcShipping (since you didn't change that), so you should be calling this:

    onClick="calcShipping(document.purchasePrice.purchase.value)">

    That's why you're not grasping the one part...the function you call has to match the name of a function precisely (as in exact spelling, case-sensitive, the whole 9 yards). You're passing the value of a field (document.purchasePrice.purchase.value) to a function called calcShipping(). Sometimes it helps to say it in English sentences rather than short form code. That's part 1.

    Part 2: you're passing a parameter (that's the part in the brackets), so you should have something to receive it. The advantage to this is that you can get rid of an entire line of your code.

    function calcShipping(purchasePrice) {
    alert (purchasePrice);
    }
    Make that your function temporarily (rename the other one so you keep the code). Just leave that as your function and watch what happens. Don't add anything else until you understand that part, although the rest will be a lot easier.

    By the way, the parseInt instruction is flawed. Your purchase price should be a number, but not necessarily an integer. It could be any positive real number (which is any number greater than 0). What if the product cost $0.99? parseInt would mess it up.

    That may well be the other reason you're confused, by the way...you may have been led down the garden path by your instructor.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Junior Member
    Join Date
    Aug 2012
    Posts
    5
    Member #
    32436
    WOW!!! I think you may be right. I wanted to question the parseInt just because of the textbook definition really didn't make sense to use it. Just by changing my code I see how easy it was make the alert box. So starting from scratch....

    <script type="text/javascript">
    /* <![CDATA[ */
    function calcShipping(purchasePrice) {
    alert (purchasePrice);
    }

    /* ]]> */
    </script>

    </head>

    <body>
    <FORM NAME="purchasePrice" action="">
    Enter Purchase Price:
    <INPUT TYPE="text" NAME="purchase"><p>
    <INPUT TYPE="button"
    VALUE="Submit"
    onClick="calcShipping(document.purchasePrice.purch ase.value)">
    </FORM>

    Now it seems I just be able to add

    if (purchase <= 25.00)
    shipping = 1.50;

    else
    shipping = (purchase * (10 / 100));

    but I see this does not work either.

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Well, let's look at your code. Your new purchase variable is called purchasePrice, so if you're going to find out if it's within the $25.00 range using your code, purchase should be called ______ ? (fill in the blank). That'll solve that part, but this is where you need to get your analytical on.

    The other thing you'll want is curly brackets. Your code should be of the form

    if (here's a condition) {
    do all this stuff
    } else {
    do all this other stuff
    }
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Aug 2012
    Posts
    5
    Member #
    32436
    ok.....new and revised code:

    <script type="text/javascript">
    /* <![CDATA[ */
    function calcShipping(purchasePrice) {
    alert ("Your total price is " + shipping);
    }
    {
    var purchase = purchasePrice (document.purchasePrice.purchase.value);
    var shipping = (shipping + purchase);
    }
    if (purchase <= 25.00){
    shipping = 1.50;
    }
    else {
    shipping = (purchase * (10 / 100));
    }

    /* ]]> */

    </script>

    </head>

    <body>
    <FORM NAME="purchasePrice" action="">
    Enter Purchase Price:
    <INPUT TYPE="text" NAME="purchase"><p>
    <INPUT TYPE="button"
    VALUE="Submit"
    onClick="calcShipping(document.purchasePrice.purch ase.value)">
    </FORM>

    still not working:banghead:....lol WOW something that seemed so easy. The commands, code all seem to make to sense......

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    It's basically because you're mixing up a whole bunch of stuff.

    First off, the entire block of code that you have after the alert and the } bracket is outside of the function. The function consists of whatever is inside of the curly brackets. The ones you put after not only won't be executed, but they're incorrect.

    Second, the reason I had you do just the alert (as in just the one line) is so that you could see what the one piece of code is and what it was supposed to accomplish. You passed value of the purchase field to purchasePrice and showed an alert with the purchase price. You need to do that with the rest of your code to make it make sense to you...take a small piece, add it to the function, and see what it does. If I or anyone else helps you any more than that, we're pretty much defeating your educational purpose, so this is what you'll need to do...don't fire everything at it at once because most of it is wrong. Get a piece right, get it to do what you expect it to do, then move on to the next piece. You take on too much, you're going to get confused and frustrated.

    Make sure to leave the alert as the last line of your function, though...not the first.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

calcshipping javascript
,
calculating shipping cost with javascript
,
create a web page that allows a user to enter a purchase price into a text box
,
if else statement calculate shipping and handling
,

javascript calcshipping

,
javascript code for calculating shipping and handling
,

javascript function that calculates shipping and handling

,

javascript shipping calculator

,
many companies normally charge a shipping and handling fee for purchases
,
web design shipping calculator
Click on a term to search for related topics.
All times are GMT -6. The time now is 01:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com