Calcul en direct - Panier en Javascript

Question

J'ai essayé de faire un formulaire en ligne pour les clients de choisir le plat qu'ils veulent et pour combien de personnes il était censé être. Mais j'ai du mal à le faire fonctionner avec Javascript seulement.

Ce que j'avais à l'esprit était de faire quelque chose comme ça:

• si le plat est vérifié
• alors obtenir la valeur du menu déroulant
• calculer le total par plat
• faire pour chaque plat
• puis dans la fonction calculateTotal() je voudrais résumer tous les sous-totaux

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>

Merci à l'avance !!

Answer 1

Voici ma version. Cela fonctionne (si j'ai ce que vous voulez correctement) mais remarquez qu'il n'est pas testé correctement. Il pourrait y avoir quelques problèmes liés à la compatibilité entre les navigateurs. Et ce que Derek a écrit dans son commentaire est également important. Ainsi, à partir du code ci-dessous, vous pouvez prendre d'abord toutes les approches et la case magique (je veux dire ne pas copypaste il - tweak par vous-même):

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>