首先,请到这里:http://webapps.bcit.ca/A00839579/MDIA3207/Assign4/cart.html
基本上,我希望当有人更新项目的数量时,它会更新" Sub-total"在右下角。不应该太难,但由于某种原因,我无法弄明白。另外,如果可以弄清楚如何在数量更新时保持小数价格,那也很棒。非常感谢!
这是我的JavaScript:
var artprice = 28.99;
var artquantity = document.getElementById("artquantity").value;
var arttotal = (artprice * artquantity).toFixed(2) - 0;
var loverprice = 19.95;
var loverquantity = document.getElementById("loverquantity").value;
var lovertotal = (loverprice * loverquantity).toFixed(2) - 0;
var nightprice = 32.00;
var nightquantity = document.getElementById("nightquantity").value;
var nighttotal = (nightprice * nightquantity).toFixed(2) - 0;
function artupdate() {
var subtotal = arttotal + lovertotal + nighttotal;
var artprice = 28.99;
var artquantity = document.getElementById("artquantity").value;
var arttotal = (artprice * artquantity).toFixed(2) - 0;
document.getElementById("artprice").innerHTML = "$" + arttotal;
document.getElementById("subtotal").innerHTML = "$" + subtotal;
}
function loverupdate() {
var subtotal = arttotal + lovertotal + nighttotal;
var loverprice = 19.95;
var loverquantity = document.getElementById("loverquantity").value;
var lovertotal = (loverprice * loverquantity).toFixed(2) - 0;
document.getElementById("loverprice").innerHTML = "$" + lovertotal;
document.getElementById("subtotal").innerHTML = "$" + subtotal;
}
function nightupdate() {
var subtotal = arttotal + lovertotal + nighttotal;
var nightprice = 32.00;
var nightquantity = document.getElementById("nightquantity").value;
var nighttotal = (nightprice * nightquantity).toFixed(2) - 0;
document.getElementById("nightprice").innerHTML = "$" + nighttotal;
document.getElementById("subtotal").innerHTML = subtotal;
}
var subtotal = arttotal + lovertotal + nighttotal;
document.getElementById("subtotal").innerHTML = "$" + subtotal;
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
答案 0 :(得分:1)
以下是完整的解决方案DEMO
请告诉我税,以便我可以将其添加到脚本
注意对html和脚本的更改。
添加新书,请遵循您现在拥有的结构。
<div id="content">
<table border="1">
<tr>
<th>Book Cover</th>
<th>Title & Author</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td class="image">
<a href="cover2.html" onClick="return openNewWindow(this.href, 475, 725);"><img alt="Book Cover" src="images/covers/2artfielding.png" /></a>
</td>
<td class="title">
<p class="table"><b>The Art of Fielding</b></p>
<p class="table"><i>by Chad Harbach</i></p>
</td>
<td class="price">
<p class="bookprice" id="artprice">$28.99</p>
</td>
<td class="quantity">
<input type="text" id="artquantity" value="1" /><br />
</td>
</tr>
<tr>
<td class="image"><a href="cover5.html" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/18thelovers.png" /></a></td>
<td class="title">
<p class="table"><b>The Lover's Dictionary</b></p>
<p class="table"><i>by David Levithan</i></p>
</td>
<td class="price">
<p class="bookprice" id="loverprice">$19.95</p>
</td>
<td class="quantity">
<input type="text" id="loverquantity" value="1" /><br />
</td>
</tr>
<tr>
<td class="image"><a href="cover4.html)" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/11nightcircus.png" /></a></td>
<td class="title">
<p class="table"><b>The Night Circus</b></p>
<p class="table"><i>by Erin Morgenstern</i></p>
</td>
<td class="price">
<p class="bookprice" id="nightprice">$32.00</p>
</td>
<td class="quantity">
<input type="text" id="nightquantity" value="1" /><br />
</td>
</tr>
</table>
<br />
<p class="totals" id="subtotal">Sub-total:</p>
<p class="totals" id="taxes">Taxes:</p>
<p class="totals" id="grandtotal">Grand-total:</p>
</div>
JavaScript - 替换两个js文件:
var popimage = 1;
function openNewWindow(href, width, height) {
// The popup name will be popup1, popup2, popup3, …. etc.
// Notice how we've concatenated the 'width' and 'height' parameters.
var w = window.open(href, "popup"+popimage,
"width=" + width + ",height=" + height +
",top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0");
popimage++;
return w?false:true;
}
var books = {}
window.onload=function() {
var inputs = document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++) {
if (inputs[i].type=="text" && inputs[i].id.indexOf('quantity')!=-1) {
var name = inputs[i].id.replace('quantity','');
books[name] = parseFloat(document.getElementById(name+'price').innerHTML.replace('$',''))
inputs[i].onkeyup=function() {
var total = 0;
for (var book in books) {
var q = document.getElementById(book+"quantity").value;
total += (isNaN(q) || q=="")?0:parseInt(q)*books[book]
}
document.getElementById('subtotal').innerHTML="Sub-total: $"+total.toFixed(2);
document.getElementById('taxes').innerHTML="Taxes: $"+(total*.06).toFixed(2);
document.getElementById('grandtotal').innerHTML="Grand-total: $"+(total*1.06).toFixed(2);
}
}
}
}
答案 1 :(得分:0)
您的问题是您在文档完全加载之前尝试设置变量的值。尝试:
var artprice = 28.99, artquantity, arttotal,
loverprice = 19.95, loverquantity, lovertotal,
nightprice = 32.00, ightquantity, nighttotal;
document.onload = function() {
artquantity = document.getElementById("artquantity").value;
arttotal = (artprice * artquantity).toFixed(2) - 0;
loverquantity = document.getElementById("loverquantity").value;
lovertotal = (loverprice * loverquantity).toFixed(2) - 0;
nightquantity = document.getElementById("nightquantity").value;
nighttotal = (nightprice * nightquantity).toFixed(2) - 0;
}
或者更好,允许您在将来添加其他功能以加载文档
var loadFuncs = [];
function addToload = function(func) {
loadFuncs.push(func)
}
function setUpPriceFields() {
artquantity = document.getElementById("artquantity").value;
arttotal = (artprice * artquantity).toFixed(2) - 0;
loverquantity = document.getElementById("loverquantity").value;
lovertotal = (loverprice * loverquantity).toFixed(2) - 0;
nightquantity = document.getElementById("nightquantity").value;
nighttotal = (nightprice * nightquantity).toFixed(2) - 0;
}
addToLoad(setUpPriceFields);
document.onload = function() {
var func;
while(func = loadFuncs.shift()) {
func();
}
}