asked on

How do I write a Shopping Cart Program in JavaScript?

I am supposed to write a JavaScript program.

The site should have 3 pages: a homepage, a product page, and an order form.

The homepage should include a link to the product page.

The product page should display products and include a product ID, a picture, a price, and description of each product .

This is where I am getting stuck. I have chosen my pictures and products to use, but I can't get the JavaScript program to incorporate them.

Any idea what I could be doing wrong or how to incorporate pictures that I am saving on my pc into the JavaScript program?

Here is what I have so far:

<!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" xml:lang="en" lang="en">
<head>
      <title>Shopping Cart</title>
      <meta name="generator" content="CSE HTML Validator Professional (http://www.htmlvalidator.com/)" />


</head>

      <title>Shopping Cart - Index</title>

      <script src="photos.js" type="text/javascript" charset="utf-8<>/scrpt>

      <script type= "text/javascript" charset="utf-8">
            window.onload = function ( ) {
                  var holder = document.getElementById( "thumb_holder" );

                  for( var x = 0; x < photos.length; x++ ) {
                        var image = document.createElement( "img" );
                        image.src = "images/" + photos[ x ].name + "_thumb.jpg";
                        var a = document.createElement( "a" );
                        a.href = "JoniQuickShoppingCart.html?image=" + photos[ x ].name;

                        a.appendChild( image );
                        holder.appendChild( a );
                  }

            }
      </script>


</head>

</body>

      <h1>Shopping Cart - Index</h1>

      <div id="thumb_holder"></div>



</body>

</html>

leakim971

place an alert in your loop to check :

for( var x = 0; x < photos.length; x++ ) {
alert("photo number " + x + " name's : " + photos[ x ].name);
                        var image = document.createElement( "img" );
                        image.src = "images/" + photos[ x ].name + "_thumb.jpg";
                        var a = document.createElement( "a" );
                        a.href = "JoniQuickShoppingCart.html?image=" + photos[ x ].name;
                        
                        a.appendChild( image );
                        holder.appendChild( a );
                  }

Open in new window

jbosarg

ASKER

The alert isn't even showing up when I do that. I will have to take a closer look and get back with you.

leakim971

it seems photos is empty or not from this world ;-)

jbosarg

ASKER

ok. I finally figured out the problem. I just started over from scratch. Now I have a new problem. I want an alert to come up if the user doesn't choose to order something. The problem I am having is that the alert keeps coming up regardless of if something is ordered or not. Can you take a look and see if you can help?
Balloons.html

leakim971

based on subtotal it work fine for me, you may replace :

document.getElementById( "subtotal" ).value

by :

document.getElementById( "subtotal" ).value.length == 0

or :

subtotal = parseFloat(document.getElementById( "subtotal" ).value);
isNaN(subtotal) || subtotal == 0

jbosarg

ASKER

Never mind. I figured it out by adding a calculate function.

jbosarg

ASKER

I have just one more question: If I am supposed to create multiple pages (home page, product page, and order form), how do I link these pages together? More specifically, on the above example, how do I have the user redirected to a page requesting shipping and payment information once the "Place Order" button is clicked.

This is my last question. I promise. :-)

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jbosarg

ASKER

I had it close, but kept screwing something up. You are awesome!!! Thanks!!!!!!

leakim971

You're welcome! Thanks for the points! Have a huge and funny week-end!