Question

我为我的网站制作了一个我正在开发的计算器。第一种形式最终计算正确，第二种形式最终总是为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

这是一个演示：

Demo Of Code

Answer 1

我认为这可能是因为您的表单也有草的Id。你能看到更改表单元素上的id是否解决了这个问题？

我希望这有帮助！

Answer 2

这是因为您的表单也分配了ID #Grass。当您致电$(this).val()时，它无法正常运作，因为您从匹配#Grass的第一个元素中获取了值，即表单。

计算器 - 第一次计算显示但第二次计算不显示

2 个答案: