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

【问题标题】：Cost Calculator using JavaScript - Advanced使用 JavaScript 的成本计算器 - 高级
【发布时间】：2019-07-11 16:24:31
【问题描述】：

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

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

如果您选择“银”和“1 个月”，则费用为 150.00 英镑。

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

如果您选择“银”和“3 个月”，则费用为 300.00 英镑。

依此类推（最长 12 个月）。所以上面的逻辑是第一个月 150.00 英镑，然后是其他月份 75 英镑。

但如果您决定要“黄金”套餐，则如下所示：

如果您选择“黄金”和“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>

我目前拥有的（有效的）如下，但它没有做我需要做的事情，这只是硬编码了成本，所以无论包裹类型如何，成本都是一样的（除了每个包裹的初始成本不同）：

<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">
  <option value="100.00" label="1 month">1 month</option>
  <option value="200.75" label="2 months">2 months</option>
  <option value="275.25" label="3 months">3 months</option>
  <option value="349.00" label="4 months">4 months</option>
  <option value="369.99" label="5 months">5 months</option>
  <option value="450.00" label="6 months">6 months</option>
</select>
</div>

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

而JavaScript如下：

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

所以我认为上面的工作代码已经差不多完成了，但我越深入，我就越意识到它的路要走。

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

【问题讨论】：

一开始不要试图将所有相关数据推送到选项中。创建一个适当的数据结构，您可以在其中查找基于所选包裹类型和月数的特定组合的成本。

标签： javascript html calculator

【解决方案1】：

根据 04FS 的评论，这是一个使用简单数据结构的简单解决方案。数据结构以包名为key，方便查找。它具有基本价格（第一个月），然后是其他月份的价格，因此可以轻松计算总价格。

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>

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

工作样本：

https://jsfiddle.net/td3j5frn/

【讨论】：

是的，通过对号码使用 .toFixed() 方法很容易。我刚刚更新了我的答案。 .toFixed() 确保数字具有给定的小数位数。

【解决方案2】：

或者，你可以去，比如：

//data model
var membershipPlans = {
  silver: {'1mo': 150, '2mo': 225, '3mo': 300},
  gold: {'1mo': 199, '2mo': 298.5, '3mo': 398}
};
//don't punish me for that with downvotes , please :)
Array.prototype.unique = function() {
  const resArr = [];
  this.forEach(entry => {
    if(resArr.indexOf(entry) == -1) resArr.push(entry);
  })
  return resArr;
};
//populate the view with possible options
const inputFields = {
  package: document.getElementById('package'),
  duration: document.getElementById('duration')
};
const cost = document.getElementById('cost');
inputFields.package.innerHTML = Object.keys(membershipPlans).sort().reduce((options, option) => options+=`<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');
inputFields.duration.innerHTML = Object.values(membershipPlans).map(entry => Object.keys(entry)).flat().unique().reduce((options, option) => options+=`<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');
//listen for input changes and display the cost
Object.values(inputFields).forEach(inputField => {
  inputField.addEventListener('change', ()=> 
    cost.innerHTML =  Object.values(inputFields).every(inputField => inputField.value !='') ? membershipPlans[inputFields.package.value][inputFields.duration.value]+'&nbsp&pound' : '-&nbsp&pound')
});

<div id="wrapper">
<span>Pick your </span>
<br>
<label>package:</label>
<select id="package" class="calcInput"></select>
<label>duration:</label>
<select id="duration" class="calcInput"></select>
<br>
<span>Your cost is:</span>
<br>
<span id="cost">-&nbsp&pound</span>
</div>

【讨论】：