如何根据选中的单选按钮及人数计算度假总费用？

问题说明 #

现有如下HTML表单，需要在点击「Calcular tarifa（计算费用）」按钮提交时，根据选择的度假类型和人数计算总价格：

• 城市（Ciudad）单价：100
• 山地（Montaña）单价：130
• 海滩（Playa）单价：150

原HTML代码（已修正部分拼写与默认值问题）：

<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="1">
        </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="ciudad" onClick="changeFormula(1)" checked >
            Ciudad</label>
        <label class="destino-label">
            <input type="radio" name="destino" value="montana" 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: <span id="total-price">0</span></h3>

原尝试的JS代码存在逻辑问题，无法正确计算总价，修正后的方案如下：

修正后的JavaScript代码 #

// 用对象映射度假类型与对应单价，逻辑更直观
const prices = {
    ciudad: 100,
    montana: 130,
    playa: 150
};

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function(e) {
    // 阻止表单默认刷新行为
    e.preventDefault();

    // 获取人数：转成数字类型避免字符串运算
    const numberOfGuests = Number(document.getElementsByName('number')[0].value);
    // 获取选中的度假类型单选框
    const selectedDestiny = document.querySelector('input[name="destino"]:checked');
    
    // 简单校验输入合法性
    if (!selectedDestiny || isNaN(numberOfGuests) || numberOfGuests < 1) {
        alert('请填写有效的人数并选择度假类型');
        return;
    }

    // 计算并显示总价
    const total = numberOfGuests * prices[selectedDestiny.value];
    document.getElementById('total-price').textContent = total;
});

// 保留原changeFormula函数，如需扩展类型相关逻辑可在此补充
function changeFormula(type) {}

关键修正点说明 #

1. 表单提交处理：添加submit事件监听并阻止默认行为，避免页面刷新丢失计算结果。
2. DOM元素取值：
   • 人数输入框：getElementsByName返回元素集合，需通过[0]获取单个元素，再转成数字类型。
   • 单选按钮：用querySelector('input[name="destino"]:checked')直接定位选中项，无需遍历集合。
3. 价格映射优化：用对象替代数组，通过单选框的value直接匹配单价，逻辑更清晰。
4. 结果展示：新增<span id="total-price">用于显示计算结果，实现页面实时更新。
5. 输入校验：增加基础校验，确保用户输入有效数据。

内容的提问来源于stack exchange，提问作者Анита Аниткина