javascript - 实时计算 - Javascript 中的购物车

Question

我一直在尝试制作一个在线表格，供客户选择他们想要的菜肴以及应该容纳多少人。但是我在让它只与 Javascript 一起工作时遇到了一些麻烦。

我的想法是做这样的事情:

• 如果菜品被选中
• 然后获取下拉菜单的值
• 计算每道菜的总数
• 对每道菜都这样做
• 然后在 calculateTotal() 函数中我将对所有小计求和

function priceDish1() {
  var quantity = 0;
  var totalPriceDish1 = 0;
  var dishPrice = 19;
  var quantity = document.getElementById("quantityDish1").value;
  var theDish1 = document.getElementById("dish1");

  if (theDish1.checked == true) {
    totalPriceDish1 = quantity * dishPrice;
  }

  return totalPriceDish1;
}

function priceDish2() {
  var quantity = 0;
  var totalPriceDish1 = 0;
  var dishPrice = 19;
  var quantity = document.getElementById("quantityDish1").value;
  var theDish1 = document.getElementById("dish1");

  if (theDish1.checked == true) {
    totalPriceDish1 = quantity * dishPrice;
  }
  return totalPriceDish1;
}

function calculateTotal() {
  var theTotalPrice = totalPriceDish1() + totalPriceDish2();
  document.getElementById('totalPrice').innerHTML = "Total $" + theTotalPrice;

}

<div id="div">
  <form action="" id="priceForm">
    <label class="dishes"><input type="checkbox" id="dish1" value="number1"> Dish Name 1</label><br>
    <label class="labelQuantPeople">Number of Dishes</label><br>
    <select id="quantityDish1" name='numberPeoplel1' onchange="calculateTotal()">
      <option class="quantDish1" value="0">0</option>
      <option class="quantDish1" value="1">1</option>
      <option class="quantDish1" value="2">2</option>
      <option class="quantDish1" value="3">3</option>
      <option class="quantDish1" value="4">4</option>
      <option class="quantDish1" value="5">5</option>
      <option class="quantDish1" value="6">6</option>
      <option class="quantDish1" value="7">7</option>
      <option class="quantDish1" value="8">8</option>
      <option class="quantDish1" value="9">9</option>
      <option class="quantDish1" value="10">10</option>
    </select><br>
    <label class="dishes"><input type="checkbox" id="dish2" value="number2"> Dish Name 2</label><br>
    <label class="labelQuantPeople">Number of Dishes</label><br>
    <select id="quantityDish2" name='numberPeoplel2' onchange="calculateTotal()">
      <option class="quantDish2" value="1">1</option>
      <option class="quantDish2" value="2">2</option>
      <option class="quantDish2" value="3">3</option>
      <option class="quantDish2" value="4">4</option>
      <option class="quantDish2" value="5">5</option>
      <option class="quantDish2" value="6">6</option>
      <option class="quantDish2" value="7">7</option>
      <option class="quantDish2" value="8">8</option>
      <option class="quantDish2" value="9">9</option>
      <option class="quantDish2" value="10">10</option>
    </select><br>
  </form>
</div>
<p id="totalPrice"></p>

提前致谢!

Answer 1

这是我的版本。它可以工作(如果我正确地得到了你想要的)但请注意它没有经过适当的测试。也可能存在一些与跨浏览器兼容性相关的问题。德里克在他的评论中写的内容也很重要。因此，从下面的代码中，您可以首先采用所有方法和复选框魔术(我的意思是不要复制粘贴它 - 自己调整它):

 function getDishPrice(dish) {
     var quantity = dish.lastChild.lastChild.value ? dish.lastChild.lastChild.value : 0,
         price = dish.dataset.price ? dish.dataset.price : 0;
     return dish.firstChild.checked ? quantity * price : 0;
 }

function calculateTotal() {
    var dishes = Array.prototype.slice.call(document.querySelectorAll(".dishes")),
        total = 0;
    dishes.filter(function(dish) {
        return dish.firstChild.checked;
    }).forEach(function(dish) {
        total += getDishPrice(dish);
    });    
    document.getElementById('totalPrice').textContent = "Total: $" + total;
}
var selects = document.getElementsByTagName("select"),
    inputs = document.getElementsByTagName("input"),
    i;
for (i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', calculateTotal, false);
    inputs[i].addEventListener('change', calculateTotal, false);
}

#priceForm label {
  display: block;
}
#priceForm label div {
  display: none;
}
#priceForm label input[type="checkbox"]:checked + div {
  display: block;
}

<div id="div">
    <form action="" id="priceForm" >
            <label class="dishes" data-price="10"><input type="checkbox" id="dish1"> Dish Name 1 <div>Number of Dishes
                <select id="quantityDish1">
                    <option class="quantDish1" value="0">0</option>
                    <option class="quantDish1" value="1">1</option>
                    <option class="quantDish1" value="2">2</option>
                    <option class="quantDish1" value="3">3</option>
                    <option class="quantDish1" value="4">4</option>
                    <option class="quantDish1" value="5">5</option>
                    <option class="quantDish1" value="6">6</option>
                    <option class="quantDish1" value="7">7</option>
                    <option class="quantDish1" value="8">8</option>
                    <option class="quantDish1" value="9">9</option>
                    <option class="quantDish1" value="10">10</option>
                </select></div></label>
                
            <label class="dishes" data-price="20"><input type="checkbox" id="dish2"> Dish Name 2 <div>Number of Dishes
                <select id="quantityDish2">
                    <option class="quantDish2" value="0">0</option>
                    <option class="quantDish2" value="1">1</option>
                    <option class="quantDish2" value="2">2</option>
                    <option class="quantDish2" value="3">3</option>
                    <option class="quantDish2" value="4">4</option>
                    <option class="quantDish2" value="5">5</option>
                    <option class="quantDish2" value="6">6</option>
                    <option class="quantDish2" value="7">7</option>
                    <option class="quantDish2" value="8">8</option>
                    <option class="quantDish2" value="9">9</option>
                    <option class="quantDish2" value="10">10</option>
                    </select></div></label>
    </form>
</div>
<p id="totalPrice">Total: $0</p>