Saya mengatur dropdown ke nol. Apakah mungkin untuk mengubahnya menjadi satu, setelah kotak centang pertama diklik? Masalah lainnya adalah perhitungan. Jadi setelah mengklik kotak centang dan mengubah kuantitas (misalkan saya memilih kuantitas= 2, jadi jumlah yang harus dibayar adalah 370)jika saya memilih sesuatu dari item tambahan, jumlah desktop akan diatur ulang ke harga dasar = 185 (jumlah = 1)

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");
var selectedValue;

var total = 0;
var price = 0;

//Removes the add on options from view
document.getElementById("desktops").onchange = function () {
  if (document.getElementById("desktops").checked) {
    price = 185;
  } else if (document.getElementById("desktops").checked == false) {
    price = 185;
    removeAddOns(price);
  }
  addAddOns(price);
};
document.getElementById("wirelessCard").onchange = function () {
    if (document.getElementById("wirelessCard").checked) {
        price = 30;
    } else if (document.getElementById("wirelessCard").checked == false) {
        price = 30;
        removeAddOns(price);
    }
    addAddOns(price);
};
//amountDue.innerHTML += total;
function addAddOns(price) {
  total += price;
  amountDue.innerHTML = total;
}
function removeAddOns(price) {
  total -= price * 2;
  amountDue.innerHTML = total;
}

selectOptions.addEventListener('change', () => {
  selectedValue =  selectOptions.options[ selectOptions.selectedIndex].value;

  amountDue.innerHTML = Math.round(total * selectedValue);
})
<div class=" products">
    <div class="form-group">
        <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
    </div>
    <select id="selectbasic" name="" class="">
        <option value="1">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div><br>


                <label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
                <div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
                    </div>


<div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due: <p id="amountDue">0</p>
    </h3>
</div>
0
Sam 28 Oktober 2019, 07:12

1 menjawab

Jawaban Terbaik

Coba kode yang dimodifikasi di bawah ini:

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");

function calculateTotal() {
  var oDesktopAddOn = document.getElementById("desktops");
  var oWirelessCardAddOn = document.getElementById("wirelessCard");
  var dTotal = 0;

  if (oDesktopAddOn.checked) {
    dTotal += 185;

    var iNumberofItems = selectOptions.options[selectOptions.selectedIndex].value;
    dTotal = Math.round(dTotal * iNumberofItems);
  }

  if (oWirelessCardAddOn.checked) {
    dTotal += 30;
  }

  amountDue.innerHTML = dTotal;
}

document.getElementById("desktops").addEventListener("change", function() {
  selectOptions.value = 1;
  calculateTotal();
});
document.getElementById("wirelessCard").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);
<div class=" products">
  <div class="form-group">
    <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
  </div>
  <select id="selectbasic" name="" class="">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div><br>


<label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
<div>
  <div class="extraItemsDesktop">
    <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
  </div>


  <div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due:
      <p id="amountDue">0</p>
    </h3>
  </div>
1
user2932057 28 Oktober 2019, 04:53