时间戳

首页 > 解决方案 > 从下拉列表中选择不同选项后，如何计算应付金额的总值？

javascript - 从下拉列表中选择不同选项后，如何计算应付金额的总值？

问题描述

我尝试了一些代码，但没有一个有效。当下拉列表中的数量更改时，我有一个应更改的金额。因此，如果有人更改订单数量，它应该乘以桌面的基本数量，结果应该是总量。这是我认为与计算部分相关的代码的一部分。

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");
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);
};

computerType.onchange = function () {
    document.getElementById("desktops").checked = false;

};

function addAddOns(price) {
    total += price;
    amountDue.innerHTML = total;
}

function removeAddOns(price) {
    total -= price * 2;
    amountDue.innerHTML = total;
}
<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="2">1</option>
        <option value="3">2</option>
    </select>
</div>

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

标签： javascript

解决方案

我找到了一个解决方案：

  • 首先，删除此代码片段，因为它当前正在引发错误：
computerType.onchange = function () {
    document.getElementById("desktops").checked = false;
};
  • 其次，声明这两个变量来存储<select>标签元素和未来selected值，如下所示：
var selectOptions = document.getElementById("ddlViewBy");
var selectedValue;
  • 第三，添加此方法以获取selected值并将总数相乘，如下所示：
selectOptions.addEventListener('change', () => {
    selectedValue =  selectOptions.options[ selectOptions.selectedIndex].value;

    amountDue.innerHTML = Math.round(total * selectedValue);
})

供您参考，这里是完整的代码示例：

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

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

您还可以检查此工作代码示例。

如果您对代码有任何疑问，请告诉我。

推荐阅读