मैंने ड्रॉपडाउन को शून्य पर सेट किया है। क्या पहले चेकबॉक्स पर क्लिक करने के बाद इसे एक में बदलना संभव है? दूसरी समस्या गणना की है। तो चेकबॉक्स पर क्लिक करने और मात्रा बदलने के बाद (मान लें कि मैं मात्रा = 2 चुनता हूं, तो देय राशि 370 होगी) यदि मैं अतिरिक्त वस्तुओं में से कुछ चुनता हूं, तो डेस्कटॉप की राशि मूल मूल्य = 185 (मात्रा =) पर रीसेट हो जाएगी। 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 अक्टूबर 2019, 07:12

1 उत्तर

सबसे बढ़िया उत्तर

नीचे दिए गए संशोधित कोड का प्रयास करें:

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 अक्टूबर 2019, 04:53