キーアップ機能が入力ボックスを変更していませんか？

Question

いくつかのフィールドを計算し、総コストを単価*数量として計算する単純なフォームを作成しようとしています。入力された単価が変更されると、単価を自動的に変更するためのキーアップ機能を使用しようとしていますが、価格を変更すると何も起こりません。

HTML

<!-- Div for quantity --> 
       <div class="form-group"> 
        <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" required> 
       </div> 
       <!-- Div for unit price --> 
       <div class="form-group"> 
        <input type="number" class="form-control" id="unitPrice" name="unitPrice" placeholder="Unit Price" required> 
       </div> 
       <!-- div for cost --> 
       <div class="form-group"> 
        <input type="number" class="form-control" id="cost" name="cost" placeholder="Cost" required> 
       </div> 

JS

$(document).ready(function() { 
    $("#unitPrice").keyup(function() { 
     var quantity = +$("#quantity").val(); 
     var price = +$("#unitPrice").val(); 
     $("#cost").val(quantity * unitPrice); 
    }); 
}); 

}）。

Answer 1

へ 変更

$("#cost").val(quantity * unitPrice); 

ここでワーキングソリューションです。あなたの変数名は

価格

ではない 単価

.Hopeことができますです！

$(document).ready(function() { 
 
     $("#unitPrice").keyup(function() { 
 
      var quantity = +$("#quantity").val(); 
 
      var price = +$("#unitPrice").val(); 
 
      $("#cost").val(quantity * price); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" required> 
 
</div> 
 
<!-- Div for unit price --> 
 
<div class="form-group"> 
 
    <input type="number" class="form-control" id="unitPrice" name="unitPrice" placeholder="Unit Price" required> 
 
</div> 
 
<!-- div for cost --> 
 
<div class="form-group"> 
 
    <input type="number" class="form-control" id="cost" name="cost" placeholder="Cost" required> 
 
</div>

Answer 2

これはタイプミスです。

$("#cost").val(quantity * price); 

Answer 3

あなたは間違った変数名を使用しています。

$("#cost").val(quantity * price);