javascript - 如何将订单总额添加到购物车？

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

请花时间阅读 scope在 JS 中，如果您扩展脚本，它会派上用场。