ライブ計算 - ショッピングカートin 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>