我可以't获取要使用jQuery显示的计算器结果

我正在使用Foundation为Mortgage计算器创建滑块，我将每个滑块连接到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);
};

EDIT：修复了jsfiddle链接。