时间戳

首页 > 解决方案 > 使用相同的输入字段计算基于加价的价格和基于价格的加价

javascript - 使用相同的输入字段计算基于加价的价格和基于价格的加价

问题描述

我创建了 3 个输入字段 Trade、Markup 和 Price。我希望用户进入交易，然后通过加价或通过输入价格和显示该价格反映的加价来操纵价格。

我希望计算是实时的，并且不必每次都提交按钮来查看更改。

我确实将代码分成了 2 个单独的脚本，但这并没有什么不同，而且我还将 addEventListeners 更改为“更改”，但这仍然不起作用。我有一种感觉，我需要以某种方式在两个结果之间添加一个 IF 语句。

document.getElementById("trade").addEventListener("change", calculation);
    document.getElementById("price").addEventListener("change", calculation);
    document.getElementById("markup").addEventListener("change", calculation);
    
        function calculation() {

        var trade = parseFloat(document.getElementById("trade").value);
        var markup = parseFloat(document.getElementById("markup").value);
        var price = parseFloat(document.getElementById("price").value);
        
        var markupresult = price / trade;
        var priceresult = markup * trade;
        
        
        document.getElementById("markup").value = (markupresult).toFixed(2); 
        
        document.getElementById("price").value = (priceresult).toFixed(2); 
      
    }
<div class="form-group"><label>Trade</label><input type="number" id="trade" name="trade"></div>
<div class="form-group"><label>Price</label><input type="number" id="price" name="price"></div>
<div class="form-group"><label>Markup</label><input type="number" id="markup" name="markup"></div>

标签： javascripthtml

解决方案

检查以下代码段。

您可以使用开关仅更改一个/反之亦然。

代替change，您可以使用keyup它将为您提供实时输出，（每当用户输入数字时，将计算并显示结果）。

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

function calculation(event) {
  var trade = parseFloat(document.getElementById("trade").value);
  var markup = parseFloat(document.getElementById("markup").value);
  var price = parseFloat(document.getElementById("price").value);

  var markupResult = price / trade;
  var priceResult = markup * trade;

  switch (event.target.getAttribute("id")) {
    case "markup":
      document.getElementById("price").value = priceResult.toFixed(2);
      break;

    case "price":
      document.getElementById("markup").value = markupResult.toFixed(2);
      break;
  }
}
<div class="form-group">
  <label>Trade</label><input type="number" id="trade" name="trade" />
</div>
<div class="form-group">
  <label>Price</label><input type="number" id="price" name="price" />
</div>
<div class="form-group">
  <label>Markup</label><input type="number" id="markup" name="markup" />
</div>

推荐阅读