购物车编码帮助答案

【问题标题】：Cart coding help购物车编码帮助
【发布时间】：2010-05-07 17:43:49
【问题描述】：

我为购物篮制作了一个简单的 Javascript 代码，但现在我意识到我在制作它时出错了，不知道如何修复它。我所拥有的是一个带有 Javascript 的 HTML 文件，但在 Javascript 中，我包含了通常仅在 HTML 文件中的图像源和字段，但我现在要做的是制作 2 个文件，一个 .HTML 文件和另一个 .JS 文件，但我想要的只是在 HTML 文件中添加到购物车的一个按钮。

目前它在每个项目旁边都有一个按钮，然后在底部有一个按钮。我需要摆脱项目旁边的按钮，但我对如何做到这一点感到困惑，我还需要来自 HTML 文件的图像以及下拉框，但这也在我不使用的 javascript 中不想。

这是我的 javascript 文件，其中嵌入了 Javascript。我在我的 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>

这有意义吗？我不确定我是否正确解释了自己。

【问题讨论】：

请澄清您的问题。
嗯，我想要一个 HTML 文件，其中我有带有价格和数量下拉框的图像源，但我不知道如何做到这一点，因为所有这些都已经在 javascript 中，但我不想那样。我只需要 javascript 来调用函数。
Help with shopping cart in javascript 的可能重复项

标签： javascript variable-assignment

【解决方案1】：

来了。有很多需要改进的地方，但它确实有效。

HTML 文件：

<!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 文件：

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

【讨论】：

hmmm 当我点击添加到购物车时似乎不起作用。我试图找到错误但什么都看不到？
您使用哪种浏览器？我尝试了 Firefox 3.6 和 Chromium（我在 Linux 上），它运行良好。看看 Firebug 或者 JS 控制台有没有错误？

【解决方案2】：

您是否在 HTML 中引用了 JS 文件？

【讨论】：

不，因为那是我的 HTML 文件，其中包含 Javascript

【解决方案3】：

第一次处理外部javascript时最常见的错误是：

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

在这种情况下，这是无效的。试试这个：

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

【讨论】：

【解决方案4】：

将 javascript 放在一个单独的文件中，即 cart.js

然后，在标签之后，放上这样的语句：

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

它对我有用。

【讨论】：

是的，但我想更改它，以便我只有一个添加到购物车按钮，目前我在每个项目旁边都有一个添加到购物车