2012-02-27 57 views
0

後首先加入購物車總,去這裏:http://webapps.bcit.ca/A00839579/MDIA3207/Assign4/cart.html的Javascript:量的變化

基本上,當有人更新,它會更新右下方的「小計」的項目的數量,我想。不應該太難,但由於某種原因,我無法弄清楚。另外,如果能夠弄清楚在數量得到更新時如何使用小數來保持價格,那也會很好。非常感謝!

這裏是我的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

刪除-0將取消您的toFixed如果你已經尾隨0 – mplungjan 2012-02-27 10:25:59

+0

我有點想通了,我的主要問題,但如果我改變第一個數字的數量是28.99美元到3數量而不是1,它會增加86.97 + 19.95 + 32.00等於138.92。但是,如果我將第一個數字的數量更改爲3,並且如果我在更改第一個數字後將第二個數字更改爲數量3,則它只會添加中間數量的3個數量,其他兩個數量爲1個數量。如果我刪除0,它會添加3個數字,如「28.9919.9532.00」作爲小計。但我希望所有這些數字加在一起,並且有兩位小數,而不是像那樣並排。 – 2012-02-27 10:29:22

回答

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);  
     } 
    } 
    } 
} 
+0

哇非常感謝!很好的作品:D – 2012-02-27 11:11:19

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(); 
    } 
} 
+0

嗯,我想我想出了一切,但我仍然想知道如何總是有兩位小數,使它看起來像錢,所以這個「96.90美元」,而不是「96.9美元」。 – 2012-02-27 10:38:42

+0

這是由於-0不屬於那裏 – mplungjan 2012-02-27 12:13:59