javascript - 未捕获的类型错误 : Cannot set property 'value' of null occurs after second call

Question

我正在尝试将自动计算年龄函数的值放入动态文本框中。它是由日期选择器的 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 。单击左侧的“登录”选项卡，然后单击“注册”。在“公民身份”上，您可以单击除“单例”之外的任何选项，然后将显示“家属”部分。您可以尝试通过日期选择器输入日期，您可以看到年龄转到其旁边的禁用文本框。当您单击“添加行”并再次执行此操作时，就会发生错误。

希望有人能帮忙。非常感谢!

Answer 1

如果您打开开发人员的控制台，您将看到在日期选择器中选择某个日期后会发生此错误:

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

document.getElementById(id_age).value = age;

这是什么意思？您的网页上不存在该 id_age 值。

让我们检查一下您的 CalculateAge 函数:它需要元素的一些值和 id。对于第二个输入，此 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