2013-12-11 177 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匹配的元素中獲取值,這是表單。

相關問題