TypeError：document.getElementById（…）在javascript中为null

Question

This is my coding for dynamic field validation. if i use this function i got 'TypeError: document.getElementById(...) is null' this kind of error.

function sr_answer_val(){
  var cnt=parseInt(document.getElementById("add_field_cnt").value);
  var submitAllow=true;
  for(var i=1;i<cnt;i++){
    if(document.getElementById("cust_field_"+i).value ==''){
      alert('Answer Should be Mandatory');
      submitAllow=false;
      return false;     
    }
  }
}

Answer 1

There's for sure no element with id named "add_field_cnt" in your html. Check if there's no any typo.

Answer 2

Your element add_field_cnt is (DOM) not loaded/created.

I guess you're loading the js in head, instead do it at the bottom of body or use document.ready

Answer 3

The element with id passed to getElementById() does not exist. So, you can do a null check

var elem = document.getElementById("add_field_cnt");
if(typeof elem !== 'undefined' && elem !== null) {
    var cnt = parseInt(document.getElementById(elem).value);
    .......// do your stuff
}

Answer 4

There is no element with the ID add_field_cnt so you are getting this error

var cnt=parseInt(document.getElementById("add_field_cnt").value);

please check your element is Created or not with add_field_cnt ID.

i hope so.

Answer 5

Probably your custom fields are not all defined, so when you try to acces one of them it is undefined.

Check the existence of the element before accesing it like:

function sr_answer_val() {
    var cnt = parseInt(document.getElementById("add_field_cnt").value);
    var submitAllow = true;
    for (var i = 1; i < cnt; i++) {
        if (document.getElementById("cust_field_" + i) && document.getElementById("cust_field_" + i).value == '') {
            alert('Answer Should be Mandatory');
            submitAllow = false;
            return false;
        }
    }
}

Demo: http://jsfiddle.net/IrvinDominin/X3ZnQ/