この計算を行うには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の - あなたはあなたの段落に結果がで保存されます計算の結果であるidと、その後$("#IdOfParagraph").append(result);を与える必要があり、この部分に

$(document).ready(function() { 

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

}); 

Answer 1

だから、私が作ったSOMチェンジャーをDIVに設定していない、これを試してみて、今では作業しなければなりません。まず、submitボタンのtypeをbuttonに変更し、jqueryのいくつかの変更を示します。

あなたのprojcetにjqueryを含めることを忘れないでください。

$(document).ready(function() { 
 
    $("#submit").click(function(e) { 
 
    var result = $('#salesPrice').val() - $('#costPrice').val(); 
 
    $("#profitOut").text(result); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<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="button" value="Submit"> 
 
</form> 
 
<p>The profit is:</p> 
 
<div id="profitOut"></div>

Answer 2

を行う方法がわかりませんサンプルとしての変数

Answer 3

div内のhtml（printOutクラスを使用）を、2つの量を差し引いた答えで更新するだけで済みます。あなたがあなたの入力のためのIDが必要

<input id="submit" type="submit" value="Submit"> 

に

<input type="submit" value="Submit"> 

を変更する必要があります

$(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> 

Answer 4

ファーズ。 ますが、出力があなたのコードに

$(document).ready(function() { 
     $("#submit").click(function(e){ 
      e.preventDefault(); 
      $('.profitOut').html(parseInt($("#salesPrice").val()) - parseInt("#costPrice").val())); 
     }); 
});