Uncaught TypeError：2回目の呼び出し後にヌルのプロパティ 'value'を設定できません。

Question

私は、ダイナミックテキストボックスに私の自動計算年齢関数の値を配置しようとしています。それはdatepickerのonchangeによって引き起こされている。

最初のテキストボックスが静的であるため、最初に呼び出すときに機能しますが、後で呼び出すとnullが返されます。

私は、このために3つのファイルがあります。

1. header.phpの <script src="assets/js/functions.js"></script>

2. dependents.php

   <div class="row"> 
       <div class="col-md-12"> 
        <label for="num_dependents" class="text-left">Dependents:</label> 
       </div> 
       <div class="col-md-12"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <div class="pull-right"> 
           <button type="button" class="btn btn-primary" id="addRow"> 
            Add <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
           </button> 
          </div> 
          <table class="table table-bordered table-striped" id="dependent_table"> 
           <thead> 
            <tr> 
             <th style="width:45%;">Name of Dependent</th> 
             <th style="width:10%;">Age</th> 
             <th style="width:35%;">Date of Birth</th> 
             <th style="width:10%;"></th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr> 
             <td class="vert-align"><input type="text" class="form-control" name="name_dependent_1" id="name_dependent_1"></td> 
             <td class="vert-align"><input type="text" class="form-control" name="age_dependent_1" id="age_dependent_1" disabled></td> 
             <td class="vert-align"> 
              <div class="col-md-12"> 
               <div class="form-group has-feedback" style="margin-top:12px;"> 
                <input class="form-control datePick" id="dob_dependent_1" name="dob_dependent_1" placeholder="YYYY-MM-DD" data-date-format="yyyy-mm-dd" type="text" onchange="CalculateAge(this.value, 'age_dependent_1');"/> 
                <i class="glyphicon glyphicon-calendar form-control-feedback"></i> 
               </div> 
              </div> 
             </td> 
             <td></td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
        </div> 
       </div> 
   </div> 
   

3. functions.jsを

   $(document).ready(function() { 
   $(document).delegate('#addRow', 'click', AddRow); 
   
   var i = 1; 
   var id_age; 
   function AddRow() { 
       i++; 
       id_age = 'age_dependent_'+ i; 
       $("#dependent_table").append("<tr>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent_" + i + "' id='name_dependent_" + i + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent_"+ i +"' id=\"'"+id_age+"'\" disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ i +"' name='dob_dependent_"+ i +"' placeholder='MM/DD/YYYY' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + " ');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><img src='images/disk.png' class='btnSave'><img src='images/delete.png' class='btnDelete'/></td>"+ "</tr>"); 
   
       $(".btnSave").bind("click", Save); 
       $(".btnDelete").bind("click", Delete); 
       return false 
   } 
   }); 
   
   
   var date_val; 
   function CalculateAge(date_val, id_age){ 
       var today = new Date(), 
        dob = new Date(date_val), 
        age = new Date(today - dob).getFullYear() - 1970; 
       document.getElementById(id_age).value = age; 
       //return $('#'+id_age).val(age); 
   } 
   

あなたは、アクションhereでそれを見ることができます。左側の[ログイン]タブをクリックし、[サインアップ]をクリックします。民事ステータスでは、[単一]を除く任意のオプションをクリックすると、従属セクションが表示されます。あなたはdatepickerで日付を入力してみることができます。年齢はその横の無効なテキストボックスに表示されます。 'Add Row'をクリックしてもう一度やり直すとエラーが発生します。

私は誰かが助けてくれることを願っています。どうもありがとう！

Answer 1

あなたは日付ピッカーで、いくつかの日付を選択した後、このエラーが起こることがわかります。

TypeError: document.getElementById(...) is null

document.getElementById(id_age).value = age;

これは何を意味していますか？そのid_age値はあなたのページに存在しないものです。

あなたのCalculateAge関数をチェックしてみましょう：要素の値とidをとります。 2番目の入力の場合、idは'age_dependent_2'になります。

あなたのページで見つけよう！ いくつかの検索の後で、あなたのページにこのようなidを持つ要素がないことを間違いなく知ることができます。しかし！私はこれを参照してください：

<input id="'age_dependent_2'" 

参照してください？あなたは余分な引用符を持って、彼らはすべてを台無しにする。彼らがどこから来たのかを見てみましょう。それは間違いなくAddRow機能だと、それはここにある：

id=\"'"+id_age+"'\" 

を参照してください - あなたがここに余分な引用符を追加します。だから、それらを削除する - ちょうど

id='"+id_age+"' 

そして第二にバグ - あなたは、関数の引数に余分なスペースを持っている：

CalculateAge(this.value,'" + id_age + " ') 
//         ^this is it 

Answer 2

どのタイプの日付操作でもmoment.jsを使用することをお勧めします。正確で簡単です。 また、this.valueがあなたの関数を呼び出すときに良いアイデアであるかどうかは分かりませんが、代わりに$("#dob_dependent_1").val()を入力して関数の入力値を取得することもできます。アラート（）またはコンソールを配置することもできます。あなたのコードにlog（）を入れて、正しい値を得ていることを確認してください。あなたが開発者のコ​​ンソールを開くと