Solving Cannot read property 'innerHTML' of null using .on()?

Question

I've gotten the error:

Cannot read property 'innerHTML' of null

and I've been having a look at the other answers on stackoverflow and a lot of them solve by using $(document).ready and although this fixes my issue it's not very efficient in my case as the time the page takes to load the dom can be very slow on occasion (+7 seconds) and I would rather that as soon as the id is available, I can then use it.

Is there a way for me to do this? I've been looking as .on() to try to see if the id exists but not sure if it can be used this way as the way i'm using it currently means that the method is never used.

The javascript file in included in the head with the id in a jsp further down.

Using $(document).ready :

$(document).ready(function() {
        updateContainerCount();
        function updateContainerCount() {
            var countElement = document.getElementById("countElement");
            if (count > 0) {
                countElement.innerHTML += ' (' + count + ')';
            }
        }
});

Using .on() with something like:

$('#countElement').on("load", function() {
        updateContainerCount();
        function updateContainerCount() {
            var countElement = document.getElementById("countElement");
            if (count > 0) {
                countElement.innerHTML += ' (' + count + ')';
            }
        }
});

Answer 1

You can directly manipulate with DOM element as long as you are sure that is has been loaded.

For example, you can put a part of your code right after the HTML declaration:

<div id="countElement"></div>
<script>
    var countElement = document.getElementById("countElement");
    if (count > 0) {
        countElement.innerHTML += ' (' + count + ')';
    }
</script>  

I am pretty sure that it is not considered to be a good practice, but sometimes I use this approach in my projects - in places where it is really important to execute script right after element DOM loading, without waiting for document to be loaded.

PS It looks like you probably can set this HTML on back-end. If yes, then it is definitely better to generate it server-side.

Answer 2

if you are writing body of function then no need to call it from same place in document.ready, i think you have to call it like following code

first write your document.ready and only call function from there don't write function body as follows

$('#countElement').on("load", function() {
    updateContainerCount();
 });

then write function body outside of document.ready block

function updateContainerCount() {
        var countElement = document.getElementById("countElement");
        if (count > 0) {
            countElement.innerHTML += ' (' + count + ')';
        }
    }

may be this will help you