Comment calculer le prix total en fonction du bouton radio sélectionné ?

Question

J'ai ce formulaire :

<form>
        <div  role="group" aria-labelledby="info">
        <p id="info"> Datos de clientes</p>
         <label class="data-label">Nombre
          <input type="name" name="nombre" >
          </label>
          <label class="data-label">Email
          <input type="email" name="email" >
           </label>
          <label class="data-label">Numero de personas
          <input type="number" min="1" name="number" value="number">
          </label>
        </div>  
        <div  role="group" aria-labelledby="destino-info">
            <p id="destino-info">Destino:</p>
            <label class="destino-label">
              <input type="radio" name="destino" value="destino"  onClick="changeFormula(1)" checked >
              Cuidad</label>
            <label class="destino-label">

            <input type="radio" name="destino" value="mantaña"  onClick="changeFormula(2)" > Montaña </label>
            <label class="destino-label">

            <input type="radio" name="destino" value="playa"  onClick="changeFormula(3)" >Playa</label>
            <button type="submit">Calcular tarifa</button></div>
      </form>

 <h3>El precio:</h3>

Sur soumission, je dois calculer le prix total en fonction du nombre de personnes et du type de vacances. Par exemple, le prix de la ville est de 100, de la montagne - 130, et de la plage - 150.

Je ne comprends pas comment modifier le coût en fonction du bouton radio sélectionné.

Voici ce que j'ai essayé, mais maintenant je me sens perdu :

const price =[
    {cost:100},
    {cost:130},
    {cost:150}
];

function CalculateTotal(){
    let numberOfGuests = document.getElementsByName("number").value;
    let typeOfDestiny =document.getElementsByName("destino")
    let total =numberOfGuests*typeOfDestiny;
}

Answer 1

Puisque les valeurs de vos boutons radio correspondent au type de vacances, vous devrez rechercher le coût en fonction de ce type. Vous devez modifier votre price dans un objet afin que vous puissiez trouver le coût par type.

Vous pouvez également ajouter un formateur de devises pour faire bonne mesure.

const form = document.forms.vacation;
const totalElement = document.querySelector('#total');

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const costLookup = {
  'destino' : { cost: 100 },
  'mantaña' : { cost: 130 }, 
  'playa'   : { cost: 150 }
};

function CalculateTotal(event) {
  event.preventDefault();
  const numberOfGuests = form.elements.number.value;
  const typeOfDestiny = costLookup[form.elements.destino.value].cost;
  const total = numberOfGuests * typeOfDestiny;
  totalElement.textContent = currencyFormatter.format(total);
  return false;
}

button[type="submit"] { display: block; }
.data-label { display: grid; grid-template-columns: 10em 1fr; }
#destino-info { display: inline-block; }

<form id="vacation" onSubmit="CalculateTotal(event)">
  <div role="group" aria-labelledby="info">
    <p id="info">Datos de clientes</p>
    <label class="data-label">Nombre
      <input type="name" name="nombre" >
    </label>
    <label class="data-label">Email
      <input type="email" name="email" >
     </label>
    <label class="data-label">Numero de personas
      <input type="number" min="1" name="number" value="number">
    </label>
  </div>
  <div role="group" aria-labelledby="destino-info">
    <p id="destino-info">Destino:</p>
    <label class="destino-label">
      <input type="radio" name="destino" value="destino" checked >
      Cuidad
    </label>
    <label class="destino-label">
      <input type="radio" name="destino" value="mantaña">
      Montaña
    </label>
    <label class="destino-label">
      <input type="radio" name="destino" value="playa">
      Playa
    </label>
    <button type="submit">Calcular tarifa</button></div>
</form>

<h3>El precio:</h3>
<div id="total"></div>

Vous pouvez également utiliser des attributs de données, par exemple data-cost au lieu de conserver un mappage en mémoire des prix. Sachez que vous devrez trouver le :checked pour accéder à l'attribut.

const form = document.forms.vacation;
const totalElement = document.querySelector('#total');

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

function CalculateTotal(event) {
  event.preventDefault();
  const numberOfGuests = +form.elements.number.value;
  const checked = form.querySelector('input[name="destino"]:checked');
  const destinationCost = +checked.getAttribute('data-cost');
  const total = numberOfGuests * destinationCost;
  totalElement.textContent = currencyFormatter.format(total);
  return false;
}

button[type="submit"] { display: block; }
.data-label { display: grid; grid-template-columns: 10em 1fr; }
#destino-info { display: inline-block; }

<form id="vacation" onSubmit="CalculateTotal(event)">
  <div role="group" aria-labelledby="info">
    <p id="info">Datos de clientes</p>
    <label class="data-label">Nombre
      <input type="name" name="nombre" >
    </label>
    <label class="data-label">Email
      <input type="email" name="email" >
     </label>
    <label class="data-label">Numero de personas
      <input type="number" min="1" name="number" value="number">
    </label>
  </div>
  <div role="group" aria-labelledby="destino-info">
    <p id="destino-info">Destino:</p>
    <label class="destino-label">
      <input type="radio" name="destino" value="destino" data-cost="100" checked >
      Cuidad
    </label>
    <label class="destino-label">
      <input type="radio" name="destino" value="mantaña" data-cost="130">
      Montaña
    </label>
    <label class="destino-label">
      <input type="radio" name="destino" value="playa" data-cost="150">
      Playa
    </label>
    <button type="submit">Calcular tarifa</button></div>
</form>

<h3>El precio:</h3>
<div id="total"></div>

Answer 2

Essayez le code ci-dessous et ajoutez id="numéro" à Numero de personas champ et changement value="Cuidad" to Cuidad bouton radio.

const priceList = [{ destination: "Cuidad", cost: 100 },{ destination: "mantana", cost: 130 },{ destination: "playa", cost: 150 },];
const TOTAL_PRICE_HEADING = 'El precio:';

    function calculateTarifa() {
        const slectedDestination = document.querySelector("input[name='destino']:checked").value;
        const idx = priceList.findIndex((place) => place.destination === slectedDestination);
        if (idx >= 0) {
            const numGuests = document.getElementById("numGuests").value;
            const totalCost = priceList[idx].cost * (numGuests * 1);
            updateTotalCost(totalCost);
        }
    }

    function updateTotalCost(cost) {
        const totalCostElement = document.querySelector('h3');
        totalCostElement.innerText = `${TOTAL_PRICE_HEADING} ${cost}`;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <form>
        <div role="group" aria-labelledby="info">
            <p id="info">Datos de clientes</p>
            <label class="data-label">Nombre
                <input type="name" name="nombre" />
            </label>
            <label class="data-label">Email
                <input type="email" name="email" />
            </label>
            <label class="data-label">Numero de personas
                <input type="number" min="1" id="numGuests" name="number" value="number" />
            </label>
        </div>
        <div role="group" aria-labelledby="destino-info">
            <p id="destino-info">Destino:</p>
            <label class="destino-label">
                <input type="radio" name="destino" value="Cuidad" checked />
                Cuidad</label>
            <label class="destino-label">
                <input type="radio" name="destino" value="mantana" />
                Montaña
            </label>
            <label class="destino-label">
                <input type="radio" name="destino" value="playa" />Playa</label>
            <button type="button" onclick="calculateTarifa()">
                Calcular tarifa
            </button>
        </div>
    </form>

    <h3>El precio:</h3>
</body>
</html>

Answer 3

Voici une autre façon (plus simple, je l'espère) de voir les choses. Vous pouvez stocker le coût de ces éléments directement dans l'élément HTML, sous la forme d'un élément propriété du jeu de données . Ensuite, appliquez un écouteur de clics qui calculera le total chaque fois que l'on cliquera sur l'un d'eux.

let total = 0;
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-cost]').forEach(r => {
    r.addEventListener('click', e => runCalc(e));
    if (r.checked) runCalc({target: r});
  })

  document.querySelector('#form').addEventListener('submit', e => {
    e.preventDefault(); // don't submit
    let chosendest = document.querySelector('[data-cost]:checked');
    console.log(`the selected destination is ${chosendest.value} for $${chosendest.dataset.cost}`);
  })
})

const runCalc = e => {
  let total = +e.target.dataset.cost;
  let loc = e.target.value
  document.querySelector('#total').innerHTML = `<h2>Going to the ${loc} will cost ${total}</h2>`;
}

<form id="form">

  <div role="group" aria-labelledby="destino-info">
    <p id="destino-info">Destino:</p>
    <label class="destino-label">
              <input type="radio" name="destino" value="destino"  data-cost="100" checked >
              Cuidad</label>
    <label class="destino-label">

            <input type="radio" name="destino" value="mantaña"  data-cost="120" > Montaña </label>
    <label class="destino-label">

            <input type="radio" name="destino" value="playa"  data-cost="130" >Playa</label>
  </div>
  <button type="submit">Calcular tarifa</button>

</form>

<div id='total'></div>