时间戳

首页 > 解决方案 > 匹配下拉数量并计算总价

javascript - 匹配下拉数量并计算总价

问题描述

我要选择参加人数，必须与用餐数量相匹配。

用户必须指定是素食还是非素食。一份蔬菜餐的价格为 5 美元，而一份非蔬菜餐的价格为 10 美元。例如，如果有 3 人参加，其中 2 位素食者和 1 位非素食者，则餐费总价为 20 美元。此外，用餐数量选项总共必须只有 3 人。我如何仅在 Javascript 中执行此操作？

我如何也显示最终价格？

function validate() {
  var dn = document.getElementById("dropDN").value;
  return false;
}

function showInput() {
  document.getElementById('displaydn').innerHTML =
    document.getElementById("dropDN").value;
}
<form class="myForm" onsubmit="return validate();">
  Number of person attending:
  <select id="dropDN">
    <option value="">Select one</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
  </select>
  <br />
  <br />Meal Quantity Options: Vegetarian
  <input type="checkbox" onclick="" name="" id="veg">
  <input type="number" max="4" />
  <br /> Non-Vegetarian
  <input type="checkbox" onclick="" name="" id="nonveg">
  <input type="number" max="4" />
  <br />
  <br />

  <br />
  <input type="submit" onclick="showInput()">
  <br>
  <br> Number of person attending: <span id="displaydn"> </span>
  <br />
</form>

标签： javascript

解决方案

  1. 监听change两个input控件的事件。
  2. 当它们发生变化时，更新相应的全局变量（vegetarian或者nonVegetarian，然后更新总膳食和成本值。

var vegetarian = 0;
var nonVegetarian = 0;
var cost = 0.00;

document.querySelector('#veg').addEventListener('change', function(e)
{
  vegetarian = parseInt(document.querySelector('#veg').value, 10);
  
  if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
  {
    nonVegetarian--;
    document.querySelector('#nonveg').value = nonVegetarian;
  }
    
  update();
});

document.querySelector('#nonveg').addEventListener('change', function(e)
{
  nonVegetarian = parseInt(document.querySelector('#nonveg').value, 10);
  if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
  {
    vegetarian--;
    document.querySelector('#veg').value = vegetarian;
  }
  update();
});

var update = function()
{
  document.querySelector('#attending').innerText = vegetarian + nonVegetarian;
  document.querySelector('#cost').innerText = (vegetarian*5) + (nonVegetarian *10);
};

update();
<form class="myForm" onsubmit="return validate();">
  Meal Quantity Options: Vegetarian
  <input id="veg" type="number" min="0" max="4" value="0" /><br /> 
  Non-Vegetarian
  
  <input id="nonveg" type="number" min="0" max="4" value="0" /><br />
  <br />

  <br> Number of people attending: <span id="attending"></span>
  <br> Cost : $<span id="cost"></span>
  <br />
</form>

推荐阅读