JavaScript getElementById null values error and how to avoid it

Question

I have created a form where user inputs the minimum and maximum number of textareas that can be added to a page. It generates the code below in order to pick it up with JScript:

$minimum .= '<div id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div id="H'.$i.'">'.$max[$i].'</div>';

In JScript, I defined a loop that will catch the above div tags and theirs innerHTMLs as numbers and put it in an array.

var mincount = [];
var maxcount = [];
for(var k=1; k<101; k++) {
    mincount[k] = parseInt(document.getElementById("K"+k).innerHTML, 10);
    maxcount[k] = parseInt(document.getElementById("H"+k).innerHTML, 10);
}

The k is defined to be up to 100. So, I know this is the problem, because then if there are less then 100 textareas, the getElementById is having null values.

So, it gives error: Uncaught TypeError: Cannot read property 'innerHTML' of null

But it must be defined to be up to 100. So, is there any option that can work something like this:

if(mincount[k] == null) {mincount[k] = ""} // in order to avoid null values.

This isn't working. It still get an error.

Answer 1

The easier solution would be to give those elements the same class, and then just select all elements with that class. I don't see a reason why every element must have their own ID.

$minimum .= '<div class="K">'.$min[$i].'</div>';
$maximum .= '<div class="H">'.$max[$i].'</div>';

Then you do in JavaScript:

var mincount = [];
var minelements = document.querySelectorAll('.K');
for (var i = 0, l = minelements.length; i < l; i++) {
    mincount.push(parseInt(minelement[i].innerHTML, 10));
    // if the content is purely numeric, unary plus is simpler:
    // mincount.push(+minelement[i].innerHTML);
}

Same of maxcount .

Or as @adeneo suggested, if your JavaScript code is also served through PHP and you have access to the $min array, just do

var mincount = <?php echo json_encode($min); ?>;

Then you don't even how to touch the DOM.

Answer 2

A preferred solution is to just put a common class on each element of a given type and query the elements that actually exist:

$minimum .= '<div class="K" id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div class="H" id="H'.$i.'">'.$max[$i].'</div>';

var mincount = [];
var maxcount = [];
var kItems = document.querySelectorAll(".K");
var hItems = document.querySelectorAll(".H");
for (var i = 0, len = Math.min(kItems.length, hItems.length); i < len; i++) {
    mincount[i] = parseInt(kItems[i].innerHTML, 10);
    maxcount[i] = parseInt(hItems[i].innerHTML, 10);

}

Without changing the HTML and keeping with your current code approach, you can just check to see if an element exists before trying to use it.:

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (objK) {
        mincount[k] = parseInt(objK.innerHTML, 10);
    }
    if (objH) {
        maxcount[k] = parseInt(objH.innerHTML, 10);
    }
}

Or, if you know that as soon as one object doesn't exist, you should break out of the for loop, you can do this:

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (!objK || !objH) {
        break;
    }
    mincount[k] = parseInt(objK.innerHTML, 10);
    maxcount[k] = parseInt(objH.innerHTML, 10);
}

Answer 3

The simplest way to test for null values is a simple equality check.

...
...
for(var k=1; k<101; k++) {
    var K_el = document.getElementById("K"+k);
    var H_el = document.getElementById("H"+k);
    if ( K_el != null && H_el != null ) {
        mincount[k] = parseInt(K_el.innerHTML, 10);
        maxcount[k] = parseInt(H_el.innerHTML, 10);
    }
}

Unless these values can be modified by the user, it would be easier to calculate the min's and max's in PHP.