JavaScript展览门票动态总价不显示及单场购票总数限制问题咨询

问题1：总价格无法动态展示 #

问题原因 #

你已经编写好了求和函数resultLight()，但没有在输入框数值变化时触发执行，当前两个输入框的oninput事件仅绑定了单类票价的计算函数，总价格节点自然不会更新。

解决步骤 #

1. 修改两个输入框的oninput属性，新增resultLight()调用：

<!-- 正价票输入框 -->
<input type="number" class="count" value="0" min="1" max="10" id="inputNumberSelect-light" oninput="priceLight();resultLight();">
<!-- 折扣票输入框 -->
<input type="number" class="count ml-3" value="0" min="0" max="10" id="inputNumberDiscSelect-light" oninput="priceLightDisc();resultLight();">

2. （可选优化）统一将输入值显式转为数字，避免字符串拼接的隐性问题：

function resultLight(){
    let normalTotal = Number(priceLight());
    let discTotal = Number(priceLightDisc());
    let result = normalTotal + discTotal;
    // 可补充单位保持展示风格统一
    document.getElementById("show__price_total").innerHTML = result + " zł";
    return result;        
}

问题2：单场购票总数限制 #

实现思路 #

每次输入框数值变化时，校验两类票的总数量，超过上限时自动修正输入值，同时动态修改另一个输入框的max属性，从根源上避免超量选择。

解决代码 #

新增通用的数量校验函数：

// 单场总票数上限，可根据不同展览单独调整
const MAX_TOTAL_PER_SHOW = 10;
function checkTotalLimit(showType) {
    // 获取当前展览的两个输入框DOM
    const normalInput = document.getElementById(`inputNumberSelect-${showType}`);
    const discInput = document.getElementById(`inputNumberDiscSelect-${showType}`);
    // 转数字计算总和，空值默认取0
    let normalCount = Number(normalInput.value) || 0;
    let discCount = Number(discInput.value) || 0;
    let total = normalCount + discCount;

    // 总和超限时修正当前输入的值
    if (total > MAX_TOTAL_PER_SHOW) {
        const activeInput = document.activeElement;
        if (activeInput === normalInput) {
            normalCount = MAX_TOTAL_PER_SHOW - discCount;
            normalInput.value = normalCount;
            // 同步更新单类票价和总价
            priceLight();
            resultLight();
        } else if (activeInput === discInput) {
            discCount = MAX_TOTAL_PER_SHOW - normalCount;
            discInput.value = discCount;
            // 同步更新单类票价和总价
            priceLightDisc();
            resultLight();
        }
    }

    // 动态更新两个输入框的max属性，后续输入直接受限
    normalInput.max = MAX_TOTAL_PER_SHOW - discCount;
    discInput.max = MAX_TOTAL_PER_SHOW - normalCount;
    // 兼容正价票min=1的规则，避免max小于min的浏览器报错
    if (normalInput.max < 1) normalInput.max = 1;
}

然后修改输入框的oninput属性，新增校验函数调用：

<!-- 正价票输入框 -->
<input type="number" class="count" value="0" min="1" max="10" id="inputNumberSelect-light" oninput="priceLight();resultLight();checkTotalLimit('light');">
<!-- 折扣票输入框 -->
<input type="number" class="count ml-3" value="0" min="0" max="10" id="inputNumberDiscSelect-light" oninput="priceLightDisc();resultLight();checkTotalLimit('light');">

如果后续要给dark、both展览加同样的限制，只需要对应修改它们的输入框oninput，把checkTotalLimit的参数换成'dark'、'both'即可。

内容的提问来源于stack exchange，提问作者mr_smeett37