使用JavaScript的成本计算器-高级

我有一个HTML表单，它有两个下拉菜单和一个按钮。一个下拉菜单有“包装类型”，其中包括“金”、“银”和“铜”。第二个下拉菜单有“月”和12个选项（最多12个月），然后是一个计算按钮

现在，这是我希望能解释清楚的一点

如果您选择“白银”和“1个月”，则将花费150.00英镑

如果您选择“白银”和“2个月”，则费用为225.00英镑

如果您选择“白银”和“3个月”，则将花费300.00英镑

等等（最多12个月）。因此，上述逻辑是第一个月150.00英镑，然后是额外的一个月75英镑

但是，如果您决定要一个“黄金”套餐，它将如下所示：

function calculatePrice(costcalculator){
  var elt = document.getElementById("packageType");
  var package = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("months");
  var months = elt.options[elt.selectedIndex].value;

  package = parseFloat(package);
  months = parseFloat(months);

  var total = package+months; 

  document.getElementById("TotalPrice").value=total;
}

如果您选择“黄金”和“1个月”，将花费199.00英镑

如果您选择“黄金”和“2个月”，将花费298.50英镑

如果您选择“黄金”和“3个月”，将花费398.00英镑

等等（最多12个月）。因此，上述逻辑是第一个月为199.99英镑，接下来的几个月为99.50英镑

“青铜”也类似，除了1个月为75.00英镑，2个月为112.50英镑（逻辑上第一个月为75.00英镑，额外的几个月为37.50英镑）

我希望这有意义？下面是表单的HTML，我知道它不起作用，但这只是尝试和解释

<form name="costcalculator">
  <div class="package-type">
<select name="packageType" id="packageType">
  <option value="199.00" label="Gold">Gold</option>
  <option value="150.00" label="Silver">Silver</option>
  <option value="75.00" label="Bronze">Bronze</option>
</select>
  </div>

  <div class="months">
<select name="months" id="months-bronze">
  <option value="£75.00" label="1 month">1 month Bronze</option>
  <option value="£112.50" label="2 months">2 months Bronze</option>
</select>
</div>

<div class="months">
<select name="months" id="months-silver">
  <option value="£150.00" label="1 month">1 month Silver</option>
  <option value="£225.00" label="2 months">2 months Silver</option>
</select>
</div>

<div class="months">
<select name="months" id="months-gold">
  <option value="£199.00" label="1 month">1 month Gold</option>
  <option value="£298.50" label="2 months">2 months Gold</option>
</select>
</div>

<button type="button" onclick="calculatePrice();showDiv();">Calculate</button>
</form>

所以我以为我已经接近上面的工作代码了，但是我越是深入其中，我越是意识到它离我越来越远

---

它只需要这样一种方式：当用户在第一个下拉菜单中选择套餐类型时，包含月份的第二个下拉菜单将（在幕后）在用户选择月数之前立即填充新成本，然后如果用户决定选择与上一个不同的套餐，第二个下拉菜单将再次刷新，但后台成本不同。

根据04FS的评论，这里有一个使用简单数据结构的简单解决方案。数据结构以包名作为键，便于查找。它有基本价格（第一个月），然后是额外月份的价格，因此可以很容易地计算出总价

HTML标记：

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>

  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>

  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

黄金
银币
青铜色
1个月
2个月
三个月
4个月
5个月
6个月
7个月
8个月
9个月
10个月
11个月
12个月
算计

Javascript代码：

var costs = {
    'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
    'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
    'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};

function setMonths(package)
{
    var maxMonths = costs[package].maxMonths;
    document.getElementById("months").innerHTML = ''; // Clear all options
    for (var i = 1; i<=maxMonths; i++){
       var opt = document.createElement('option');
       opt.value = i;
       opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
       document.getElementById('months').appendChild(opt);
    }
}

function calculatePrice()
{
  var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price.toFixed(2);
}

var成本={
黄金：{'basePrice'：199.99，'pricePerMonth'：99.5，'maxMonths'：12}，
银币：{'basePrice'：150，'pricePerMonth'：75，'maxMonths'：12}，
“铜牌”：{“基本价格”：75，“价格月数”：37.5，“最大月数”：2}
};
功能设置月数（套餐）
{
var maxMonths=成本[套餐].maxMonths；
document.getElementById（“月”）.innerHTML=''；//清除所有选项
对于（VarI=1；I1？“月”：“月”）；
document.getElementById（'months'）.appendChild（opt）；
}
}
函数calculatePrice（）
{
var package=document.getElementById（'packageType'）。值；
var months=document.getElementById（'months'）。值；
var价格=成本[package].basePrice+（成本[package].pricePerMonth*（月-1））；
document.getElementById（'price'）.innerHTML=price.toFixed（2）；
}

工作样本：

---

根据04FS的评论，这里有一个使用简单数据结构的简单解决方案。数据结构以包名作为键，便于查找。它有基本价格（第一个月），然后是额外月份的价格，因此可以很容易地计算出总价

HTML标记：

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>

  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>

  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

黄金
银币
青铜色
1个月
2个月
三个月
4个月
5个月
6个月
7个月
8个月
9个月
10个月
11个月
12个月
算计

Javascript代码：

var costs = {
    'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
    'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
    'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};

function setMonths(package)
{
    var maxMonths = costs[package].maxMonths;
    document.getElementById("months").innerHTML = ''; // Clear all options
    for (var i = 1; i<=maxMonths; i++){
       var opt = document.createElement('option');
       opt.value = i;
       opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
       document.getElementById('months').appendChild(opt);
    }
}

function calculatePrice()
{
  var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price.toFixed(2);
}

var成本={
黄金：{'basePrice'：199.99，'pricePerMonth'：99.5，'maxMonths'：12}，
银币：{'basePrice'：150，'pricePerMonth'：75，'maxMonths'：12}，
“铜牌”：{“基本价格”：75，“价格月数”：37.5，“最大月数”：2}
};
功能设置月数（套餐）
{
var maxMonths=成本[套餐].maxMonths；
document.getElementById（“月”）.innerHTML=''；//清除所有选项
对于（VarI=1；I1？“月”：“月”）；
document.getElementById（'months'）.appendChild（opt）；
}
}
函数calculatePrice（）
{
var package=document.getElementById（'packageType'）。值；
var months=document.getElementById（'months'）。值；
var价格=成本[package].basePrice+（成本[package].pricePerMonth*（月-1））；
document.getElementById（'price'）.innerHTML=price.toFixed（2）；
}

工作样本：

或者，你可以去，比如：

//数据模型
var成员资格计划={
银币：{'1mo'：150，'2mo'：225，'3mo'：300}，
黄金：{'1mo'：199，'2mo'：298.5，'3mo'：398}
};
//请不要用反对票来惩罚我：）
Array.prototype.unique=函数（）{
常数resArr=[]；
this.forEach（条目=>{
if（resArr.indexOf（entry）=-1）resArr.push（entry）；
})
回报率；
};
//使用可能的选项填充视图
常量输入字段={
包：document.getElementById（'package'），
持续时间：document.getElementById（‘持续时间’）
};
const cost=document.getElementById（'cost'）；
inputFields.package.innerHTML=Object.keys（membershipPlans）.sort（）.reduce（（选项，选项）=>options+=`${option}`，''；
inputFields.duration.innerHTML=Object.values（membershipPlans）.map（entry=>Object.keys（entry））.flat（）.unique（）.reduce（（选项，选项）=>options+==`${option}`，''；
//倾听输入更改并显示成本
Object.values（inputFields）.forEach（inputField=>{
inputField.addEventListener（'change'，（）=>
cost.innerHTML=Object.val