Cart coding help_问答_开发者_运维开发者技术经验分享

I've made a simple Javascript code for a shopping basket but now I have realised that I have made a error with making it and don't know how to fix it. What I have is a HTML file with the Javascript, but in the Javascript I have included the images source and fields that would normally only be in the HTML file but What I am trying to do now is make 2 files one a .HTML file and another .JS file, but what I want is only one button that adds to cart in the HTML file.

At the moment its has a button next to each item and then a button at the bottom. I need to get rid of the buttons next the item but I'm confused on how to do that, also I need the images sourced from the HTML file as well as the drop down boxes, but this is also in the javascript which I don't want.

This is my javascript file with the Javascript embedded in it. I have sourced it correctly in my HTML.

<SCRIPT type="text/javascript">
var items=['Xbox~149.99','StuffedGizmo~19.98','GadgetyGoop~9.97'];

var M='�';  var product=[]; var price=[]; var stuff='';

function wpf(product,price){var pf='<form><FIELDSET><LEGEND>'+product+'</LEGEND>';
pf+='<img src="../images/'+product+'.jpg"  alt="'+product+'" ><p>price           '+M+''+price+'</p> <b>Qty</b><SELECT>';
for(i=0;i<6;i++){pf+='<option value="'+i+'">'+i+'</option>'} pf+='</SELECT>';
pf+='<input type="button" value="Add to cart" onclick="cart()" /></FIELDSET></form>';
return pf
}

for(j=0;j<items.length;j++){
product[j]=items[j].substring(0,items[j].indexOf('~'));
price[j]=items[j].substring(items[j].indexOf('~')+1,items[j].length);
stuff+=''+wpf(product[j],price[j])+'';
}
 document.getElementById('products').innerHTML=stuff;

function cart(){ var order=[]; var tot=0
for(o=0,k=0;o<document.forms.length;o++){
if(document.forms[o].elements[1].value!=0){
qnty=document.forms[o].elements[1].value;
order[k]=''+product[o]+'_'+qnty+'*'+price[o]+'';
tot+=qnty*price[o];k++
}
}
document.getElementById('inCart').innerHTML=order.join('<br>')+'<h3>Total   '+tot+'</h3>';
}
</SCRIPT>

Does this make sense? I'm not sure If I'v开发者_开发技巧e explained myself correctly.

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">
<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>';
}

Have you referenced the JS files in your HTML?

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>

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.

Cart coding help

精彩评论

关注公众号

热门标签

图文推荐

Cart coding help

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：