如何在購物車中添加訂單總數？

Question

我已經為印刷廠准備了在線訂購表格。 形式一切順利。 但是我需要將每個訂單的總金額放入購物車，因為有人可能要訂購多個打印作業。 我是javascript的新手，我嘗試通過循環進行此操作，但僅添加了一次。 任何幫助將不勝感激。

 //calculation script omitted var addToCartButton = document.getElementsByClassName('addToCart') for (var i = 0; i < addToCartButton.length; i++) { var button = addToCartButton[i] button.addEventListener('click', function() { var grandTotal = new Array; grandTotal.push(allTotal) var cartRowContents = '<table><tr><th>Xidmet adi</th><th>Cemi</th></tr>' var buttonClicked = document.getElementById('cartTotal') var serviceName = document.getElementById('service') for (k = 0; k < grandTotal.length; k++) { cartRowContents += '<tr><td>' + serviceName.value + '</td><td>' + grandTotal[k] + '</td></tr>' } buttonClicked.innerHTML = cartRowContents; cartRowContents += '</table>' }) } 

 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Onlayn ödəmə</h4> </div> <div class="modal-body"> <form class="form-payment" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="payment"> <fieldset> <p class="warning" id="warning">Hörmətli müştəri, istəyinizə uyğun sifarişinizi qeyd edin və yekun məbləğin doğruluğundan əmin olduqdan sonra "Təsdiq et" düyməsini sıxın</p> <input type="hidden" name="id" /> <label for="service">Xidmət növü:</label> <select class="form-select" id="service" name="service" onchange="calculateTotal()"> <option value="none" selected disabled>Xidmət növünü seçin</option> <option value='Çap'>Çap</option> <option value='Kserokopiya'>Kserokopiya</option> <option value='Kitab çapı'>Kitab çapı</option> <option value='Diplom və sertifikat çapı'>Diplom və sertifikat çapı</option> <option value='Poster çapı'>Poster çapı</option> <option value='Skan'>Skan </option> <option value='Laminasiya'>Laminasiya</option> <option value='Cildləmə'>Cildləmə</option> </select> <label id="papertypeL" for="papertype">Kağız növü:</label> <select class="form-select" id="papertype" name="papertype" onchange="calculateTotal()"> <option value="none" selected disabled>Kağız növünü seçin</option> <option value='Standart kağız (A4-parlaq)-0.50 AZN'>Standart kağız(A4-parlaq)-0.50 AZN</option> <option value='Premium kağız (A4-parlaq)-1 AZN'>Premium kağız (A4-parlaq)-1 AZN</option> <option value='VİP kağız (A4-Mat)-1.50 AZN'>VİP kağız (A4-Mat)-1.50 AZN</option> </select> <label id="scansizeL" for="scansize">Kağız ölçüsü:</label> <select class="form-select" id="scansize" name="scansize" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A4'>A4</option> <option value='A3'>A3</option> </select> <label id="bookprintL" for="bookprint">Kağız ölçüsü:</label> <select class="form-select" id="bookprint" name="bookprint" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A4'>A4</option> <option value='A5'>A5</option> </select> <label id="postersizeL" for="postersize">Poster ölçüsü:</label> <select class="form-select" id="postersize" name="postersize" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A3'>A3</option> <option value='A3+'>A3+</option> </select> <label id="posterpaperL" for="posterpaper">Kağız növü:</label> <select class="form-select" id="posterpaper" name="posterpaper" onchange="calculateTotal()"> <option value="none" selected disabled>Kağız növünü seçin</option> <option value='Standart kağız'>Standart kağız</option> <option value='Premium kağız'>Premium kağız</option> <option value='VİP kağız'>VİP kağız</option> </select> <label id="printL" for='print'>Çap növü:</label> <label id="radio" class="container-radio">Ağ-qara <input type="radio" checked="checked" name="capnovu" value="Ağ-qara" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="radio" class="container-radio">Rəngli <input type="radio" name="capnovu" value="Rəngli" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="sideL" for='side'>Üz sayı:</label> <label id="side" class="container-radio">Təküzlü <input type="radio" checked="checked" name="uzsayi" value="Təküzlü" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="side" class="container-radio">İkiüzlü <input type="radio" name="uzsayi" value="İkiüzlü" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="kitab-cildL" class="container-radio" for="kitab-cild">Cildləmə<input id="kitab-cild" type="checkbox" onclick="calculateTotal()" /><span class="checkmark-box"></span></label> <label id="cildL" for="cild">Cildləmə növü:</label> <select class="form-select" id="cild" name="cild" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Kleylə cildləmə'>Kleylə cildləmə</option> </select> <label id="cildA4L" for="cildA4">Cildləmə növü:</label> <select class="form-select" id="cildA4" name="cildA4" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Kleylə cildləmə'>Kleylə cildləmə</option> <option value='Kitab bərpa'>Kitab bərpa</option> <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option> </select> <label id="cildA3L" for="cildA3">Cildləmə növü:</label> <select class="form-select" id="cildA3" name="cildA3" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option> </select> <label id="sayL" for="say">Səhifə Sayı:</label><input id="say" name="say" class="form-input" type="text" value="" onclick="calculateTotal()" /> <label id="nusxeSayL" for="nusxeSay">Nüsxə Sayı:</label><input id="nusxeSay" name="nusxeSay" class="form-input" type="text" value="" onclick="calculateTotal()" /> <label id="laminasiyaL" class="container-radio">Laminasiya olacaq? <input type="checkbox" id="laminasiya" name="checkbox" onclick="calculateTotal()"> <span class="checkmark-box"></span> </label> <label id="deliveryL" class="container-radio">Çatdırılma olacaq? <input type="checkbox" id="delivery" name="checkbox" onclick="calculateTotal()"> <span class="checkmark-box"></span> </label> <label id="deliveryRadio" class="container-radio">Bakıdaxili kuryer ilə (3 AZN) <input type="radio" checked="checked" name="radio" value="kuryer" id="kuryer" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="deliveryRadio" class="container-radio">Bakıdaxili taksi ilə (5 AZN) <input type="radio" name="radio" value="taksi" id="taksi" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="deliveryRadio" class="container-radio">Bölgələrə poçtla (3 AZN) <input type="radio" name="radio" value="poct" id="poct" onclick="calculateTotal()"> <span class="checkmark"></span> </label> </fieldset> </div> <div id="totalPrice" style="padding:10px; font-weight:bold; background-color:#ff0; "> </div> <div id="cartTotal"> <p></p> </div> <div class="modal-footer"> <button type="submit" name="submit" data-dismiss="modal" class="btn btn-default">Təsdiq et</button> <button class="btn btn-default addToCart" id="addToCart" type="submit">Add to Cart</button> </form> </div> 

我想在單擊addToCart按鈕時將變量allTotal添加到grandTotal數組中，然后重置表單。 它添加了數據，但沒有添加新行，而是替換了舊數據。

Answer 1

好吧，您每次單擊時都在重新定義grandTotal 。 以下將更好：

var grandTotal = new Array;
for (var i = 0; i < addToCartButton.length; i++) {
    var button = addToCartButton[i]
    button.addEventListener('click', function(){
        grandTotal.push(allTotal)
        var cartRowContents = '<table><tr><th>Xidmet adi</th><th>Cemi</th></tr>'
        var buttonClicked = document.getElementById('cartTotal')
        var serviceName = document.getElementById('service')
        for(k=0;k<grandTotal.length;k++){
            cartRowContents += '<tr><td>' +serviceName.value+'</td><td>' +grandTotal[k]+'</td></tr>' 
        }
        cartRowContents += '</table>';
        buttonClicked.innerHTML = cartRowContents;
    })
}

花時間閱讀有關JS 范圍的知識，如果您擴展腳本，它會派上用場。