Справка по кодированию корзины - PullRequest
Новая
       3

Справка по кодированию корзины

0 голосов
/ 07 мая 2010

Я сделал простой код Javascript для корзины покупок, но теперь я понял, что сделал ошибку при ее создании и не знаю, как ее исправить.У меня есть HTML-файл с Javascript, но в Javascript я включил источник изображений и поля, которые обычно бывают только в HTML-файле, но сейчас я пытаюсь сделать 2 файла одним.другой файл .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>

Имеет ли это смысл?Я не уверен, правильно ли я объяснил.

Ответы [ 4 ]

2 голосов
/ 08 мая 2010

Вот оно.Можно многое улучшить, но это работает.

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>';
}
0 голосов
/ 07 мая 2010

Наиболее распространенная ошибка при работе с внешним javascript в первый раз: 

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

В этом случае это неверно. Попробуйте вместо этого: 

<script type="text/javascript" src="myscripts.js"></script>
0 голосов
/ 07 мая 2010

Поместите JavaScript в отдельный файл, т.е. cart.js

Затем, после тега, поместите это утверждение: 

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

Это работает на моем конце.

0 голосов
/ 07 мая 2010

Вы ссылались на файлы JS в своем HTML?

...