jeepers_creepers jeepers_creepers - 3 months ago 11
Javascript Question

Uncaught TypeError: Cannot set property 'value' of null occurs after second call

I'm trying to place the value of my auto compute age function in a dynamic textbox. It's being triggered by onchange of datepicker.

It's working the first time I call it (because the first textbox is static) but when I try to call it after that, it just returns null.

I have 3 files for this:


  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);
    }



You can see it in action here. Click the Login tab on the left side then click Signup. On Civil Status you can click any option except for "Single" then the Dependents Section will show up. You can try inputting date by datepicker and you can see the age go to the disabled textbox beside it. When you click 'Add Row' and do it again that's where the error occurs.

I hope someone could help. Thanks a lot!

Answer

If you open your developer's console you will see that after you select some date in datepicker this error happens:

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

document.getElementById(id_age).value = age;

What does this means? That id_age value is something that is not present on your page.

Let's check your CalculateAge function: so it takes some value and id of an element. For the second input this id should be 'age_dependent_2', right?

So, let's find it in your page! After some searching I can definitely tell that there's no element with such id on your page. But! I see this:

<input id="'age_dependent_2'" 

See? You got extra quotes and they ruin everything. Let's find - where they came from. It's definitely AddRow function and it is here:

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

See - you add extra quote here. So remove them - just

id='"+id_age+"'

And second bug - you have extra space in function's arguments:

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