Javascript: добавление суммы в корзину после изменения количества

Question

Во-первых, иди сюда: http://webapps.bcit.ca/A00839579/MDIA3207/Assign4/cart.html

В принципе, я хотел бы, чтобы, когда кто-то обновлял количество товара, он обновлял "Подытог" в правом нижнем углу.Не должно быть слишком сложно, но по какой-то причине я не могу понять это.И на заметку: если я могу понять, как я могу хранить цены с десятичными знаками, когда количество обновляется, это тоже было бы здорово.Большое спасибо!

Вот мой 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;
}

Answer 1

Вот полное решение ДЕМО

Скажите, пожалуйста, налог, чтобы я мог добавить это к сценарию

Примечание изменения в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);      
      }  
    }
  }
}

Answer 2

Ваша проблема в том, что вы пытаетесь установить значения для ваших переменных до полной загрузки документа.Попробуйте:

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