javascript - 我无法让所有的 Javascript 计算一起工作以获得总计

Question

当有人从不同产品中选择不同选项时，我需要获得应付金额。第一个复选框的计算是正确的，直到我选择第二个复选框，将第一个框的计算重置为零。这是代码的一部分和 JSFiddle以及。抱歉，代码有点长。我试图让它更短，但每次我都搞乱了代码。

"use strict";

var total = 0;
var price = 0;

var amountDue = document.getElementById("amountDue");

var selectOptions = document.getElementById("selectDesktop");
var selectOptionsPlus = document.getElementById("selectDesktopPlus");


function calculateTotal() {
    var desktopAddOn = document.getElementById("desktops");
    var desktopPlusAddOn = document.getElementById("desktopsPlus");

    var wirelessCardAddOn = document.getElementById("wirelessCard");
    var extraMemoryAddOn = document.getElementById("extraMemory");
    var speakersAddOn = document.getElementById("speakers");
    var surgeProtectorsAddOn = document.getElementById("surgeProtectors");
    var flashDriveAddOn = document.getElementById("flashDrive");
    var addSSDAddOn = document.getElementById("addSSD");

    var dTotal = 0;

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

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

    if (desktopPlusAddOn.checked) {
        dTotal += 85;

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

    if (wirelessCardAddOn.checked) {
        dTotal += 30;
    }
    if (extraMemoryAddOn.checked) {
        dTotal += 50;
    }
    if (speakersAddOn.checked) {
        dTotal += 30;
    }
    if (surgeProtectorsAddOn.checked) {
        dTotal += 5;
    }
    if (flashDriveAddOn.checked) {
        dTotal += 30;
    }
    if (addSSDAddOn.checked) {
        dTotal += 30;
    }
    amountDue.innerHTML = dTotal;
}

document.getElementById("desktops").addEventListener("change", function () {
    selectOptions.value = 1;
    calculateTotal();
});

document.getElementById("desktopsPlus").addEventListener("change", function () {
    selectOptions.value = 1;
    calculateTotal();
});

document.getElementById("wirelessCard").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

document.getElementById("extraMemory").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

document.getElementById("speakers").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

document.getElementById("surgeProtectors").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

document.getElementById("flashDrive").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

document.getElementById("addSSD").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

            <div class="form-row products">
                <div class="form-group">
                    <label for="chkYes1">
                        <input type="checkbox" id="desktops" name="" value="desktops" />
                        Desktops (1-9 Units) - $185.00 &nbsp;&nbsp;
                    </label>
                </div>
                <select id="selectDesktop" name="" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>

            <!--  Desktops (10+ Units) -->
            <div class="form-row products">
                <div class="form-group ">
                    <label for="chkYes2">
                        <input type="checkbox" id="desktopsPlus" name="" value="desktopsPlus" />
                        Desktops (10+ Units) - $85.00 &nbsp;&nbsp;
                    </label>
                </div>
                <select id="selectDesktopPlus" name="" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>

            <!-- Laptops (1-9 Units) -->
            <div class="form-row products">
                <div class="form-group ">
                    <label for="chkYes3">
                        <input type="checkbox" id="laptops" name="" value="laptops" />
                        Laptops (1-9 Units) - $250.00 &nbsp;&nbsp;&nbsp;&nbsp;
                    </label>
                </div>
                <select id="selectbasic" name="selectbasic" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>

            <!-- Laptops (10+ Units) -->
            <div class="form-row products">
                <div class="form-group ">
                    <label for="chkYes4">
                        <input type="checkbox" id="laptopsPlus" name="" value="laptopsPlus"/>
                        Laptops (10+ Units) - $125.00 &nbsp;&nbsp;
                    </label>
                </div>
                <select id="selectbasic" name="selectbasic" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <!-- Microsoft Surface -->
            <div class="form-row products">
                <div class="form-group ">
                    <label for="chkYes5">
                        <input type="checkbox" id="msSurface" name="" value="msSurface" />
                        Microsoft Surface - $199.00 &emsp;&nbsp;
                    </label>
                </div>
                <select id="selectbasic" name="selectbasic" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>

            <!-- Apple iPad -->
            <div class="form-row products">
                <div class="form-group ">
                    <label for="chkYes6">
                        <input type="checkbox" id="appleIpad" name="" value="appleIpad" />
                        Apple iPad - $85.00 &emsp;&emsp;&emsp;&emsp;&emsp;
                    </label>
                </div>
                <select id="mySelect" name="" class="form-control-sm">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>


            <!-- Checkboxes for extra Items for Purchase (Desktop) -->
            <div id="chkYesText1" class="form-group">
                <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="extraItemsDesktop">
                        <label for="checkboxes-1">
                            <input type="checkbox" name="extraMemory" id="extraMemory" value="extraMemory">
                            Extra Memory (2GB) - $50.00
                        </label>
                    </div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-2">
                            <input type="checkbox" name="speakers" id="speakers" value="speakers">
                            Speakers - $30.00
                        </label>
                    </div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-3">
                            <input type="checkbox" name="surgeProtectors" id="surgeProtectors" value="surgeProtectors">
                            Surge Protectors - $5.00
                        </label>
                    </div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-4">
                            <input type="checkbox" name="flashDrive" id="flashDrive" value="flashDrive">
                            Flash Drive - $30.00
                        </label>
                    </div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-5">
                            <input type="checkbox" name="addSSD" id="addSSD" value="addSSD">
                            Add SSD (Solid State Drive) - $30.00
                        </label>
                    </div>
                </div>
            </div>

            <!-- Checkboxes for extra Items for Purchase (Laptop) -->
            <div id="chkYesText2" class="form-group">
                <label class="font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Laptop)</label>
                <div>
                    <div class="extraItemsLaptop">
                        <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCardLap" id="wirelessCardLap" value="wirelessCardLap">
                            Surge Protectors - $5.00
                        </label>
                    </div>
                    <div class="extraItemsLaptop">
                        <label for="checkboxes-1">
                            <input type="checkbox" name="flashDriveLap" id="flashDriveLap" value="flashDriveLap">
                            Flash Drive - $30.00
                        </label>
                    </div>
                    <div class="extraItemsLaptop">
                        <label for="checkboxes-2">
                            <input type="checkbox" name="addSSDLap" id="addSSDLap" value="addSSDLap">
                            Add SSD (Solid State Drive) - $30.00
                        </label>
                    </div>
                    <div class="extraItemsLaptop">
                        <label for="checkboxes-3">
                            <input type="checkbox" name="extraMemoryLap" id="extraMemoryLap" value="extraMemoryLap">
                            Extra Memory (2GB) - $50.00
                        </label>
                    </div>
                    <div class="extraItemsLaptop">
                        <label for="checkboxes-4">
                            <input type="checkbox" name="speakers" id="speakers" value="speakers">
                            Speakers - $30.00
                        </label>
                    </div>
                </div>
            </div>

        <div class="form-group border border-dark rounded py-3 px-5">
            <h3>Amount Due: <p id="amountDue">0</p>
            </h3>
        </div>

Answer 1

单击检查时，您没有将 selectedOptionsPlus 选择设置为 1。这导致乘以零。

   document.getElementById("desktopsPlus").addEventListener("change", function () {
       selectOptions.value = 1;
      calculateTotal();
   });