簡單的覆蓋caculator不會點擊並且沒有錯誤。 jQuery和straigt JS

我試圖轉換直javacript功能火與jQuery。點擊簡單的覆蓋caculator不會點擊並且沒有錯誤。 jQuery和straigt JS

我沒有得到任何輸出錯誤但它不會上的jsfiddle進行計算。

var form = document.product_form_top; 

function process(v) { 
    var value = parseInt(document.getElementById('item_qty').value); 
    value += v; 
    document.getElementById('item_qty').value = value.toFixed(0); 
} 

    function calculate() { 
     form.cubicYards.value = (form.length.value/3) * (form.width.value/3) * (form.depth.value/35); 

     document.getElementById('yards').innerHTML = finaloutput 

     var number = parseFloat(form.item_qty.value); 
     var finaloutput = number.toFixed(0); 

     form.item_qty.value = form.cubicYards.value * 14.7; //calculate yards 

     var number = parseFloat(form.cubicYards.value); 
     var finaloutput = number.toFixed(0); 

     document.getElementById('item_qty').innerHTML = finaloutput 

     form.weightPounds.value = (form.length.value/3) * (form.width.value/3) * (form.depth.value * 21); 
     form.weightPounds.value * 700; 

     var number = parseFloat(form.weightPounds.value); 
     var finaloutput = number.toFixed(0) 

     document.getElementById('pounds').innerHTML = finaloutput 
    }

這裏有一個的jsfiddle http://jsfiddle.net/4L4St/8/

這是一個使用的onclick =「計算（）的一個工作版本;一個按鈕執行此功能，我寧願使用jQuery的。點擊功能來啓動它

http://spartonenterprises.com/store/playground-mulch

而且，我使用toFixed（0），以去除多餘的小數點和Firebug的檢查，當它看起來工作，但可見的HTML顯示小數。奇怪？

來源

2013-04-04 Denny Smith

你應該真的需要花一些時間在[DRY]（http://en.wikipedia.org/wiki/Don't_repeat_yourself）這個代碼上。它會幫助你和所有想要回答的人。看看簡單的更改可以在代碼的可讀性上做些什麼：https：//gist.github.com/elclanrs/5315134。加上適當的縮進和間距。 – elclanrs 2013-04-04 23:02:10

謝謝你。我會盡量更好地格式化它。 – 2013-04-04 23:07:45

刪除行'function calculate（）{'及其對應的'}' - 該函數永遠不會被調用;您需要將該函數的內容直接放在您傳遞給'.click（）'的匿名函數中。然後你的代碼會在你點擊按鈕時運行，如下所示：http://jsfiddle.net/nnnnnn/4L4St/2/，你可以開始修復控制檯中出現的實際錯誤（比如'Uncaught TypeError：Can not read未定義'的屬性'cubicYards'）。 – nnnnnn 2013-04-04 23:07:54

我編輯你的小提琴在這裏：http://jsfiddle.net/4L4St/5/，作爲一個例子;你有基本的錯誤，但有了這個例子，你現在可以再試一次。

我編輯HTML是這樣的：

<div class="control-group clearfix"> 
<div class="rubber-nugget-calc"> 
    <label class="control-label" for="item_qty"> 
      <h2>Calculate Bags</h2> 

    </label> 
    <div class="clear"></div>Length: 
    <input type="text" name="length" size="3" class="sidebarinput" />(feet) Width: 
    <input type="text" name="width" size="3" class="sidebarinput" />(feet) 
    <br/>Depth: 
    <select class="depthselect" name="depth"> 
     <option value="">Please Select One</option> 
     <option value="1">1 inch</option> 
     <option value="2">2 inches</option> 
     <option value="3">3 inches</option> 
     <option value="4">4 inches</option> 
     <option value="5">5 inches</option> 
     <option value="6">6 inches</option> 
     <option value="7">7 inches</option> 
     <option value="8">8 inches</option> 
     <option value="9">9 inches</option> 
    </select> 
    <!--Calculate Button --> 
    <button class="calculate" type="button" style="float:right;" class="button">Calculate Bags Needed</button> 
    <!--Results--> 
    <p>You will need approximately:</p> 
    <div class="calc-results"> 
     <div id="yards" style="display:none;"> <span> (results) </span> 

     </div> <span class="mulchspan" style="display:none;"> Total cubic yards of mulch </span> 

     <input type="text" id = "cubicYards" name="cubicYards" size="2" class="sidebarresult" value="" /> 
     <div class="clear"></div> 
     <div id="pounds" style="display:none;"> <span style=""> (results) </span> 

     </div> <span class="mulchspan" style="display:none;"> Pounds of mulch (*For bulk delivery) </span> 

     <input type="text" name="weightPounds" size="6" class="sidebarresult" /> 
    </div> 
    <label class="control-label" for="item_qty">Approximate Bags Needed</label> 
    <br/> 
    <br/> <small>*Note - Round up by one bag to ensure coverage/You may use the calculator or manually enter the amount.</small> 

    <div class="controls"> 
     <div class="button-div"> 
      <input type="text" id="item_qty" name="item_qty" class="input-mini" value="" /> 
     </div> 
    </div> 
</div> 
</div>

而且你的功能是這樣的：

$(".calculate").click(function() { 

alert('sdfasgg');  
document.getElementById('cubicYards').value = 12; 
document.getElementById('yards').style.display=""; 
document.getElementById('yards').innerHTML = 25; 
document.getElementById('item_qty').value = 26; 
document.getElementById('pounds').style.display="";  
document.getElementById('pounds').innerHTML = 27; 
});

------------------- ------------ UPDATE ------------------------------------- -

這是最後的小提琴http://jsfiddle.net/4L4St/13/

隨着fixex慈mals

它不計算，但現在你可以以最好的方式做所有的計算;以工作代碼爲例。

來源

2013-04-04 23:35:18 Hackerman

好的，我添加到nnnnnn的小提琴，這裏是一個工作編輯。 http://jsfiddle.net/4L4St/9/關於toFixed（0），我做了什麼錯誤。 innerHTML不適用於輸入嗎？ – 2013-04-05 02:31:29

innerHTML是用於像div一樣的標籤...用於輸入你有價值....我看到小提琴，看起來很好...你現在有什麼錯誤？ – Hackerman 2013-04-05 02:38:12

我沒有收到錯誤，我想刪除輸入中的額外小數。我可以將.innerHTML更改爲.value嗎？ – 2013-04-05 02:42:28

總結這一切....

$(document).ready(function() { 
    //Code here 

});

和

你只是定義你的函數....你需要調用它，calculate()

和

哪裏你的形式是？您的代碼參考product_form_top，但我沒有在您的html中看到任何類似內容。

來源

2013-04-04 22:59:16 KingKongFrog

簡單的覆蓋caculator不會點擊並且沒有錯誤。 jQuery和straigt JS

回答

相關問題