ansaurus

Question

Cart coding help

Answer 1

A:

Have you referenced the JS files in your HTML?

Dustin Laine 2010-05-07 17:47:36

No because that is my HTML file with the Javascript in it

2010-05-07 18:25:09

Answer 2

A:

The most common error when dealing with external javascript for the first time is this:

<script type="text/javascript" src="myscripts.js"/>

In this case, that's invalid. Try this instead:

<script type="text/javascript" src="myscripts.js"></script>

Dean J 2010-05-07 17:51:45

Answer 3

A:

Put the javascript in a separate file, i.e. cart.js

Then, after the tag, put this statement:

<SCRIPT type="text/javascript" src="cart.js"></SCRIPT>

It works on my end.

Vanco 2010-05-07 18:41:13

Yeah but I want to change it so that I have only one Add to cart button, at the moment I have an add to cart next to each item

2010-05-07 19:59:16

Aaaah! Now I get you.

Vanco 2010-05-08 11:04:58

Answer 4

+2 A:

Here it is. There's a lot to be improved, but it works.

HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<HTML>
<HEAD>
    <TITLE>Shopping</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
        fieldset    {width:300px}
        legend      {font-size:24px;font-family:comic sans ms;color:#004455}
    </STYLE>
</HEAD>
<BODY scroll="auto">
    <div id="products"></div><hr>
    <div id="inCart"></div>
    <input type="button" value="Add to cart" onclick="cart()" />
</BODY>
<SCRIPT type="text/javascript" src="cart.js"></SCRIPT>
</HTML>

Javascript File:

var items =
    [
        {'id':1, 'name':'Xbox',             'desc':'The best gaming console from Microsoft',    'price':149.99,     'image_src': '',    'qty':0},
        {'id':2, 'name':'Stuffed Gizmo', 'desc':'This gizmo is stuffed with stuff',             'price':19.98,  'image_src': '',    'qty':0},
        {'id':3, 'name':'Gadgety Goop', 'desc':'',                                                      'price':9.00,       'image_src': '',    'qty':0}
    ];

var M = '£';
var stuff = '';
var order = [];
var tot = 0;

for(j=0;j<items.length;j++) {
    stuff+=''+wpf(j)+'';
}
document.getElementById('products').innerHTML=stuff;

function wpf(j) {
    var pf='';

    pf+='<form name="frm_cart_'+j+'">';
    pf+='<fieldset><legend>'+items[j].name+'</legend>';
    pf+='<img src="../images/'+items[j].image_src+'"  alt="Image of '+items[j].name+'" >';
    pf+='<p>'+items[j].desc+'</p>';
    pf+='<p>Price:'+M+''+items[j].price+'</p>';
    pf+='<b>Qty</b>';
    pf+='<select id="qty_'+j+'">';
    for(i=0;i<6;i++) {
        pf+='<option value="'+i+'">'+i+'</option>'
    }
    pf+='</select>';
    pf+='</fieldset>';
    pf+='</form>';
    return pf;
}

function cart() {
    var sel_elems = document.getElementsByTagName('select');
    k=0;
    for (i=0; i < sel_elems.length; i++) {
        if (sel_elems[i].id.substring(0, 4) == 'qty_' && sel_elems[i].value > 0) {
            console.log(i, sel_elems[i].value);
            order[k]=''+items[i].name+'_'+sel_elems[i].value+'*'+items[i].price+'';
            tot += sel_elems[i].value*items[i].price;
            k++;
        }
    }

    document.getElementById('inCart').innerHTML=order.join('<br>')+'<h3>Total   '+tot+'</h3>';
}

Vanco 2010-05-08 17:00:26

hmmm Doesn't seem to work when I click on add to cart. I tried to find the error but can't see anything?

2010-05-09 19:02:38

What kind of browser do you use?I tried it of Firefox 3.6 and Chromium (I'm on Linux) and it works perfectly.Can you see if there are any errors in Firebug or in JS console?

Vanco 2010-05-10 06:53:04

it's working now, thanks for the help

2010-05-10 16:44:43

ansaurus

tags:

views:

answers:

Cart coding help

related questions