計算器-顯示第一個計算，但第二個不顯示

Question

我為仍在開發中的網站制作了一個計算器。 第一種形式最終正確計算出bu，第二種形式最終始終為0。

這是我的代碼：
HTML

    <div class="col-md-4">
      <div class="CostStone"></div>
      <h2><img src="assets/images/Stone.png" width="64" height="64">Stone</h2>
      <p>Original Price: $100 Per 16 Blocks</p>
      <p style="color:red;">Price With HB Premium: $25 Per 16 Blocks</p>
      <form>
      <input id="StonePrice" type="hidden" value="1.56">
      <input maxlength="4" id="Stone" type="text" class="form-control" placeholder="Quantity Of Items" onkeypress="return isNumberKey(event)"><br>
      <p><button type="submit" class="btn btn-default" >Buy Items</button></p>
      </form>
    </div>
    <div class="col-md-4">
      <div class="CostGrass"></div>
      <h2><img src="assets/images/Grass.png" width="64" height="64">Grass</h2>
      <p>Original Price: $100 Per 48 Blocks</p>
      <p style="color:red;">Price With HB Premium: $50 Per 48 Blocks</p>
      <form id="Grass">
      <input id="GrassPrice" type="hidden" value="1.04">
      <input maxlength="4" type="text" id="Grass" class="form-control" placeholder="Quantity Of Items" onkeypress="return isNumberKey(event)"><br>
      <p><button class="btn btn-default"  type="submit">Buy Items</button></p>
      </form>
   </div>

JS/JQuery

 //Stone
 $("#Stone").on('keyup',function(){
 // alert('pressed')
    var CostStone= $("#StonePrice").val() * $(this).val();
    var CostStone2 = CostStone.toFixed(2);
    $(".CostStone").html("<div class='alert alert-info fade-in'><a class='close'  href='#' data-dismiss='alert'>&times;</a><p>Total Cost: $"+CostStone2+"</p></div>");
});
//End Stone

 //Grass
 $("#Grass").on('keyup',function(){
// alert('pressed')
     var CostGrass= $("#GrassPrice").val() * $(this).val();
    var CostGrass2 = CostGrass.toFixed(2);
      $(".CostGrass").html("<div class='alert alert-info fade-in'><a class='close' href='#' data-dismiss='alert'>&times;</a><p>Total Cost: $"+CostGrass2+"</p></div>");
  });
  //End Grass

這是一個演示：

代碼演示

Answer 1

我認為這可能是由於您的表格也有一個草名。 您能否看到更改表單元素上的ID是否解決了問題？

我希望這有幫助！

Answer 2

這是由於您的表單也#Grass分配了ID #Grass 。 調用$(this).val() ，它無法正常運行，因為您是從與#Grass匹配的第一個元素（即表單）中獲取值的。