jquery - 我如何使用 jQuery 进行此计算并以 HTML 形式显示答案？

Question

我想构建一个简单的计算应用程序。用户输入成本价和销售价，点击提交后我希望显示利润。我想在 jQuery 中执行此操作，而不仅仅是在标准 javascript 中。

我如何使用 jQuery 进行此计算并以 HTML 形式显示答案。

HTML 代码

<form>
  Cost Price:<br>
  <input type="text" id="costPrice" name="firstname"><br>
  Sales Price:<br>
  <input type="text" id="salesPrice" name="lastname">
  <input type="submit" value="Submit">
</form>

<p>The profit is:</p>
<div class="profitOut"></div>  

jQuery - 不知道如何执行这部分

$(document).ready(function () {

  $("submit").click(function(){
    $(("#salesPrice").val() - ("#costPrice").val())
  });

});

Answer 1

您只需使用减去两个金额后得到的答案来更新 div 内的 html(带有 printOut 类)即可。

$(document).ready(function () {
      $("#form").submit(function(e){
          e.preventDefault();
          var x = $("#salesPrice").val() - $("#costPrice").val();
          $("#profitOut").html(x);
      });
});

HTML

<form id="form">
  Cost Price:<br>
  <input type="text" id="costPrice" name="costPrice"><br>
  Sales Price:<br>
  <input type="text" id="salesPrice" name="salesPrice">
  <input id="submit" type="submit" value="Submit">
</form>
<p>The profit is:</p>
<div id="profitOut"></div>