提供php变量的Null innerHTML仅在Firefox中不起作用

I have two forms on my page (min & max) which should provide the minimum and maximum textfields user can add. So this is the part of my code with the problem.

PROBLEM: It works great in Chrome/IExplorer but in Firefox it cannot work. The problem is that it reports an error

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

The error is also existiong in Chrome, but the code works. So, I found that it is the problem with inner html of div with ids K1, H1, K2, H2... It is somehow empty no matter that it prints out on page.

$kx[$j] = $_POST['min'][$j];
$hx[$j] = ($_POST['max'][$j]);
$kxx .= '<div style="visibility:hidden;" id="K'.$j.'">'.$kx[$j].'</div>';
$hxx .= '<div style="visibility:hidden;" id="H'.$j.'">'.$hx[$j].'</div>';

<script type="text/javascript">
var counter = [];
var mxcounter = [];
for(var u=1; u<101; u++) {
    counter[u] = parseInt(document.getElementById("K"+u).innerHTML, 10);
    mxcounter[u] = parseInt(document.getElementById("H"+u).innerHTML, 10);
}
</script>

What should I do?

Make sure that the script block is executed after the HTML is constructed. Execute the script at onLoad.

You could also double check that the generated ids go from 1 to 100, just in case.

It will produce error if the number of div elements are less then the '101' used in loop. However, If you are adding divs through javascript, you can have a hidden element on the form to save the maximum count and increase it for every new div.

function add_div() {
    // your code to add div element
    var max = document.getElementById("maxcount").value;
    document.getElementById("maxcount").value = parseInt(max)+1;
}