如何通过Trade、Markup、Price输入框实现售价与加价的实时双向计算

你的现有代码存在两个核心问题：

• 没有判断触发计算的输入源，每次执行会同时覆盖Markup和Price两个输入框的值，逻辑冲突
• change事件仅在输入框失焦时触发，要实现实时响应需替换为input事件

以下是可直接运行的修正代码：

JS代码 #

document.getElementById("trade").addEventListener("input", calculation);
document.getElementById("price").addEventListener("input", calculation);
document.getElementById("markup").addEventListener("input", calculation);

function calculation(e) {
    // 捕获当前触发计算的输入框
    const triggerId = e.target.id;
    const trade = parseFloat(document.getElementById("trade").value);
    const markup = parseFloat(document.getElementById("markup").value);
    const price = parseFloat(document.getElementById("price").value);

    // 贸易值为空/非法时不执行计算
    if (isNaN(trade) || trade <= 0) return;

    if (triggerId === 'markup' && !isNaN(markup)) {
        // 修改毛利率时自动计算售价
        document.getElementById("price").value = (markup * trade).toFixed(2);
    } else if (triggerId === 'price' && !isNaN(price)) {
        // 修改售价时自动反算毛利率
        document.getElementById("markup").value = (price / trade).toFixed(2);
    } else if (triggerId === 'trade') {
        // 修改贸易值时，优先按已有毛利率算售价，无毛利率则按售价算毛利率
        if (!isNaN(markup)) {
            document.getElementById("price").value = (markup * trade).toFixed(2);
        } else if (!isNaN(price)) {
            document.getElementById("markup").value = (price / trade).toFixed(2);
        }
    }
}

HTML代码（可选优化，增加输入限制） #

<div class="form-group"><label>Trade</label><input type="number" id="trade" name="trade" min="0.01" step="0.01"></div>
<div class="form-group"><label>Price</label><input type="number" id="price" name="price" min="0.01" step="0.01"></div>
<div class="form-group"><label>Markup</label><input type="number" id="markup" name="markup" min="0" step="0.01"></div>

实现效果 #

• 输入Trade值后，修改Markup实时计算对应Price
• 直接输入Price实时反算出对应Markup
• 修改Trade值时自动联动更新另一个字段
• 所有计算实时触发，无需点击提交按钮

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