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.

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. — Felix Kling
– Felix Kling, Commented Apr 13, 2014 at 17:47
... or just output the PHP $min and $max arrays directly to a data attribute or even a javascript variable. — adeneo
– adeneo, Commented Apr 13, 2014 at 17:49
Because, it must be printed in html element by element with different css. And this with the class I don't think should resolve the problem I have :( — mpavlovic89
– mpavlovic89, Commented Apr 13, 2014 at 17:49
There's also using the "name" attribute. document.getElementsByName will return an array, in DOM order from top to bottom. — James M. Lay
– James M. Lay, Commented Apr 13, 2014 at 17:50
Problem is when for example $min is 3. I have then loop that will go 3 times and for example if the second index in array is not defined (because not all indexes are filled with this code) I got null again :( — mpavlovic89
– mpavlovic89, Commented Apr 13, 2014 at 17:51

Felix Kling · Accepted Answer · 2014-04-13 17:58:48Z

2

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.

edited Apr 13, 2014 at 17:58

answered Apr 13, 2014 at 17:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James M. Lay · Accepted Answer · 2014-04-13 18:00:36Z

1

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.

answered Apr 13, 2014 at 18:00

James M. Lay

2,5201 gold badge28 silver badges38 bronze badges

Comments

jfriend00 · Accepted Answer · 2014-04-13 18:07:42Z

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

Collectives™ on Stack Overflow

JavaScript getElementById null values error and how to avoid it

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related