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 minimal reproducible example 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
– CertainPerformance, Commented Jun 26, 2019 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... — teraspora
– teraspora, Commented Jun 27, 2019 at 0:36
b is just a DOM element that I made a few lines above the code. b = document.createElement("DIV"); — jedu
– jedu, Commented Jun 27, 2019 at 2: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
– jedu, Commented Jun 27, 2019 at 2:39

DylanScript · Accepted Answer · 2019-06-27 02:00:01Z

1

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.

answered Jun 27, 2019 at 2:00

DylanScript

945 bronze badges

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

Comments

jedu · Accepted Answer · 2019-06-27 05:24:55Z

0

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.

answered Jun 27, 2019 at 5:24

jedu

1,3613 gold badges34 silver badges73 bronze badges

Comments

Alen.Toma · Accepted Answer · 2019-06-27 05:43:22Z

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

            });

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related