JQuery電卓は結果を表示しません

Question

このjQueryベースの電卓に問題があります。それはまったく動かない。コンソールにエラーはありません。それを修正するのを助けてください。

計算ボタンをクリックすると計算結果が結果範囲に表示されます。

<div class="line14"><span class="line15">&nbsp;</span> 
    <div class="clear"></div> 
    <div class="line16"> 
     <form method="post" name="test"> 
      <ul> 
       <li> <span class="line16-lft">How many links will you post a day?</span> 
        <div class="line16-rght"> 
         <select class="cus hasCustomSelect" id="numlinks" style="width: 77px; position: relative; left: 55px; height: 22px; font-size: 16px;"> 
          <option value="5">5</option> 
          <option value="10">10</option> 
          <option selected="selected" value="15">15</option> 
          <option value="25">25</option> 
          <option value="35">35</option> 
         </select> 
         <span class="customSelect cus" style="display: inline-block;"><span class="customSelectInner" style="width: 53px; display: inline-block;">15</span></span></div> 
        <div class="clear"></div> 
       </li> 
       <div class="clear"></div> 
       <li> <span class="line16-lft">Average money earned for each Link?</span> 
        <div class="line16-rght"> 
         <select class="cus hasCustomSelect" id="linksum" style="width: 77px; position: relative; left: 55px; height: 22px; font-size: 16px;"> 
          <option value="10">$10</option> 
          <option selected="selected" value="20">$20</option> 
          <option value="25">$25</option> 
          <option value="30">$30</option> 
         </select> 
         <span class="customSelect cus" style="display: inline-block;"><span class="customSelectInner" style="width: 53px; display: inline-block;">$20</span></span></div> 
        <div class="clear"></div> 
       </li> 
       <div class="clear"></div> 
       <li> <span class="line16-lft">How many days a week will you work?</span> 
        <div class="line16-rght"> 
         <select class="cus hasCustomSelect" id="daysperweek" style="width: 77px; position: relative; left: 55px; height: 22px; font-size: 16px;"> 
          <option value="1">1</option> 
          <option value="2">2</option> 
          <option value="3">3</option> 
          <option value="4">4</option> 
          <option selected="selected" value="5">5</option> 
          <option value="6">6</option> 
          <option value="7">7</option> 
         </select> 
         <span class="customSelect cus" style="display: inline-block;"><span class="customSelectInner" style="width: 53px; display: inline-block;">5</span></span></div> 
        <div class="clear"></div> 
       </li> 
       <div class="clear"></div> 
      </ul> 
     </form> 
    </div> 
    <div class="clear"></div> 
    <div class="line18"> 
     <ul> 
      <li>Daily Income: <span id="daily_result">$300</span></li> 
      <li>Weekly Income: <span id="weekly_result">$1500</span></li> 
     </ul> 
     <ul> 
      <li>Monthly Income: <span id="monthly_result">$6000</span></li> 
      <li>Yearly Income: <span id="yearly_result">$78000</span></li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
    <span> 
       <button class="line17" id="calculate">Calculate</button> 
       </span></div> 






<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#calculate').click(function() { 

      $('#daily_result').innerHTML = "$" + ($('#numlinks').val() * $('#linksum').val()); 
      $('#weekly_result').innerHTML = "$" + (1 * $('#numlinks').val() * $('#linksum').val() * $('#daysperweek').val()); 
      $('#monthly_result').innerHTML ="$" + (4 * $('#numlinks').val() * $('#linksum').val() * $('#daysperweek').val()); 
      $('#yearly_result').innerHTML ="$" + (52 * $('#numlinks').val() * $('#linksum').val() * $('#daysperweek').val()); 
     }); 
    }); 

Answer 1

問題は、次の部分でのJavascript構文jQueryの構文とバニラを配合していることである。

$('#daily_result').innerHTML = "$" + ($('#numlinks').val() * $('#linksum').val()); 

$('#daily_result')はjQueryオブジェクトです。あなたは基礎となるDOM要素とそのinnerHTMLプロパティにアクセスしたい場合は、実行する必要があります。

$('#daily_result')[0].innerHTML = "$" + ($('#numlinks').val() * $('#linksum').val()); 

しかし、他の - そしておそらくより良い - オプションは、jQueryののhtml()方法を使用することです：

を

$('#daily_result').html("$" + ($('#numlinks').val() * $('#linksum').val()));