如何根据所选单选按钮计算总价

Question

我有这个表格：

<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>

提交时，我需要根据人数和假期类型计算总价。 例如，城市的价格是 100，山区是 130，海滩是 150。

我不明白如何根据所选的单选按钮更改成本。

这是我尝试过的，但现在我感到迷茫：

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

由于您的单选按钮值是假期类型，因此您需要按该类型查找费用。 您应该将price数组更改为 object，以便您可以按类型查找成本。

您还可以加入货币格式化程序以备不时之需。

 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>

您还可以使用数据属性，即data-cost ，而不是保留价格的内存映射。 请注意，您必须找到:checked单选按钮才能访问该属性。

 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

尝试下面的代码并将id="number" 添加到 Numero de personas字段并将value="Cuidad" 更改为 Cuidad单选按钮。

 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

这是另一种（希望更简单）的查看方式。 您可以将这些东西的成本作为数据集属性直接存储在 HTML 元素中。 然后应用一个点击监听器，每次点击其中一个时都会计算总数。

 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>