實時計算-用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

這是我的版本。 它可以工作（如果我正確地得到了您想要的東西），但是請注意，它沒有經過正確的測試。 跨瀏覽器兼容性也可能存在一些問題。 德里克（Derek）在評論中寫的內容也很重要。 因此，從下面的代碼中，您可以首先采用所有方法和復選框魔術（我是說不要復制粘貼-自己進行調整）：

  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>