2013-12-11 137 views
0

我为我的网站做了一个计算器,我仍在开发。第一种形式最终正确地计算BU第二形式结束后成为总是0Caculator - 第一次计算显示,但第二次不计算

这是我的代码:
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

回答

2

我认为这可能是由于您的窗体也有草的ID导致的。你能否看到如果更改表单元素上的id可以解决问题?

我希望这有助于!

+0

它可能是这样一个简单的薄G来解决,但它可能是一个很难看到。谢谢!这确实奏效! – user2647319

+0

是的,像这样的问题有时会导致相当头痛:) – MDiesel

+0

乐于帮助! – MDiesel

1

这是由于您的表单已将ID #Grass分配给它也造成的。当您致电$(this).val()时,它不能正常工作,因为您从第一个与#Grass匹配的元素中获取值,这是表单。

相关问题