Cannot Cannot read property 'addEventListener' of null when using innerHTML

Question

I am using innerHTML to add some elements and wrapper on top of it

for (i = 0; i < arr.length; i++) {
    b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div>" + 
            "<div class='col-4'>" + arr[i].Bookid + "</div>" + 
           "<div class='col-4'>" + arr[i].StoreName + "</div>" + "</div>"
            var d=document.querySelector('.wrapper')
            d.addEventListener("click", function(e) {
                console.log('on click fired')
                /*insert the value for the autocomplete text field:*/
                inpStr=this.innerHTML
                inp.value = this.innerHTML
                /*close the list of autocompleted values,
                (or any other open lists of autocompleted values:*/
                closeAllLists();

            });
}

The innerHTML is working as expected but when I click the wrapper row, I get

Cannot Cannot read property 'addEventListener' of null when using innerHTML

Is this because I am using innerHTML to create an element?

That sounds pretty strange, are you sure the `.wrapper` element is still in the document? Can you create a [MCVE] that we can debug? Keep in mind that assigning to the `innerHTML` of an element will destroy all listeners on any children of that element — CertainPerformance, Jun 26 '19 at 23:52
If you're relying on ASI and encounter a bug, it may be worth inserting semicolons manually to obviate ASI as a cause... — John, Jun 27 '19 at 00:36
`b` is just a DOM element that I made a few lines above the code. `b = document.createElement("DIV");` — jedu, Jun 27 '19 at 02:33
If I remove the line where the javascript fails i.e `d.addEventListener` than I can see that the `.wrapper` element is created properly. — jedu, Jun 27 '19 at 02:39

score 1 · Answer 1 · answered Jun 27 '19 at 02:00

The problem is querySelector only returns the first element with class .wrapper

querySelectorAll() should be used to return an array of .wrappers instead, and iterated through with a for loop to place the event listeners.

Alternatively, you could use a technique known as event delegation and place the event listener on the parent, and use event.target to refer to the child clicked.

score 0 · Answer 2 · answered Jun 27 '19 at 05:24

Well I am still not sure what is causing the issue. But I changed the code above to something like:

$(b).on('click','#wrapper',function(){
    console.log('on click fired')
    /*insert the value for the autocomplete text field:*/
    inpStr=this.innerHTML
    inp.value = this.innerHTML
    /*close the list of autocompleted values,
    (or any other open lists of autocompleted values:*/
    closeAllLists();
})

and it gives me the right innerhtml. I ust need to figure out how to retrive the just the value from inside the tag.

score 0 · Answer 3 · answered Jun 27 '19 at 05:43

First of you have more then one .wrapper so you always get only the first created wrapper when you execute var d=document.querySelector('.wrapper')

You will need th current created wrapper. This is what you should do have a look below.

var d= document.createElement("div") // Create a new div
b.append(d); // append the new Created div to b
d.className = "wrapper"; 
d.innerHTML =  "<div class='col-4'>" + arr[i].storeID + "</div>" + 
            "<div class='col-4'>" + arr[i].Bookid + "</div>" + 
           "<div class='col-4'>" + arr[i].StoreName + "</div>";
// Add your click operation
d.addEventListener("click", function(e) {
                console.log('on click fired')
                /*insert the value for the autocomplete text field:*/
                inpStr=this.innerHTML
                inp.value = this.innerHTML
                /*close the list of autocompleted values,
                (or any other open lists of autocompleted values:*/
                closeAllLists();

            });

Cannot Cannot read property 'addEventListener' of null when using innerHTML

3 Answers3