我無法使用jQuery獲得計算器結果

我正在使用Foundation爲按揭計算器創建滑塊，並且我已將每個滑塊連接到jQuery代碼，但結果不會在我創建的輸入上顯示我無法使用jQuery獲得計算器結果

我把它添加到的jsfiddle到現場觀看：http://jsfiddle.net/to0namiSB/Ae5Y4/42/

和代碼是樓下：

<!-- Start of Mortgage Payment Calculator --> 

     <div class="row"> 
      <div class="small-12 large-centered columns "> 
       <form> 
       <fieldset> 
        <legend>Mortgage Payment Calculator</legend> 
        <div class="row"> 
         <h6 class="subheader">Use our loan calculator to help you determine the loan financing amount and payment options that are best for you.</h6> 
        </div> 

        <div class="row"> 
        <!-- This is the Loan Amount slider --> 
        <h6 class="subheader">Loan Amount:</h6> 
         <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput5; start: 1; end: 1000000;"> 
          <span class="range-slider-handle" role="slider" tabindex="0"></span> 
          <span class="range-slider-active-segment"></span> 
          <input type="hidden"> 
         </div> 

        <!-- The input where the user can input an number --> 
        <div class="small-4 large-2 columns right"> 
         <input type="number" id="sliderOutput5"> 
        </div> 
        </div> 

        <div class="row"> 
        <label>Years:</label> 
        <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput3; start: 1; end: 60;"> 
         <span class="range-slider-handle" role="slider" tabindex="0"></span> 
         <span class="range-slider-active-segment"></span> 
         <input type="hidden" > 
        </div> 

        <div class="small-4 large-2 columns right"> 
         <input type="number" id="sliderOutput3"> 
        </div> 
        </div> 

        <div class="row"> 
        <!-- This is the Interest slider --> 
        <h6 class="subheader">Interest:</h6> 
        <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput4;"> 
         <span class="range-slider-handle" role="slider" tabindex="0"></span> 
         <span class="range-slider-active-segment"></span> 
         <input type="hidden"> 
        </div> 

        <!-- The input where the user can input an number --> 
        <div class="small-4 large-2 columns right"> 
         <input type="number" min="0" max="100" value="10" step=".1" id="sliderOutput4"> 
        </div> 
        </div> 


        <div class="row"> 

        <input type=button id="btnPostJob" class="button right" value="Calculate"></input> 
        </div> 


        <div class="row"> 
        <label>Approximate Payments:</label> 
        </div> 

        <div class="row"> 
<label>Monthly payment: $ <span class="output" id="payment"></span></label> 

<label>Total payment: $ <span class="output" id="total"></span></label> 

<label>Total interest: $ <span class="output" id="totalinterest"></span></label> 
        </div> 
        </fieldset> 
       </form> 
      </div> 
      </div> 

<!-- End of Mortgage Payment Calculator -->

jQuery的部分

$(document).foundation(); 


     function doSum() { 
     var amount = $("#sliderOutput5"); 
     var apr = $("#sliderOutput4"); 
     var years = $("#sliderOutput3"); 
     var payment = $("#payment"); 
     var total = $("#total"); 
     var totalinterest = $("#totalinterest"); 

     var principal = parseFloat($(amount).val()); 
     var interest = parseFloat($(apr).val())/100/12; 
     var payments = parseFloat($(years).val()) * 12; 

     var x = Math.pow(1 + interest, payments); 
     var monthly = (principal*x*interest)/(x-1); 


     document.getElementById('payment').innerHTML = monthly.toFixed(2); 
     document.getElementById('total').innerHTML = (monthly * payments).toFixed(2); 
     document.getElementById(totalinterest).innerHTML = ((monthly*payments)-principal).toFixed(2); 


$("#payment, #total, #totalinterest").click(doSum); 

};

編輯：修正了jsfiddle鏈接。

來源

2014-10-17 Luis Almonte

三個問題我在這裏看到：

Click事件處理程序需要是dosum功能之外。
當您得到總興趣元素時，'total interest'需要用引號括起來，即document.getElementById('totalinterest')，儘管看起來您已經在jsfiddle中修復了這個問題。
假設你想計算，當你點擊「計算」的出現，則需要連接到單擊處理該元素，而不是支付元件，即使用$("#btnPostJob").click(doSum);代替$("#payment").click(doSum);

來源

2014-10-17 16:36:39 superjinjo

謝謝你，這工作完美!!!!! – 2014-10-17 16:43:21

問題現在，當我將它添加到外部文件時它不起作用。 – 2014-10-17 16:48:13

我猜你的意思是將腳本添加爲外部文件。我也猜測你正在''標籤中添加腳本標籤。如果是這樣的話，它不起作用的原因是腳本在加載之前試圖將事件處理程序附加到'$（「＃btnPostJob」）''。嘗試將腳本標記放在''標記的底部，或者將代碼包裝在'$（document）.ready（function（）{...}）;' – superjinjo 2014-10-17 17:18:21

你可以看看這個替代解決方案。 plnkr.co/edit/hNg2gOTHa7ig2hPsrmZ8?p=preview

來源

2014-10-17 16:40:28 nick

我無法使用jQuery獲得計算器結果

回答

相關問題