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 Javascript file but I have also included the images source and the addtocart button as well, but What I am trying to do now is make 2 files one a .HTML file and another .JS file, but I can't get it to because when I make a button in the HTML file to call the function from the .JS file it won't work at all.
<!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>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<div id="products"></div><hr>
<div id="inCart"></div>
<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>
<input type="button" value="Add to cart" onclick="cart()" /></FIELDSET></form>
</BODY></HTML>
