Question

我已经为购物篮制作了一个简单的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>

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

然后，在标记之后，输入以下声明：

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

它适用于我。

购物车编码帮助

4 个答案: