Javascript: Uncaught type error: cannot read property innerHTML of undefined

Question

I cannot solve this error , it tells me that my buttons are undefined and cannot read their innerHtml attribute, the convert method is defined in the original code file and i have no problem with it,can you help me , the error comes from the code section below:

var btnsArr = document.getElementsByClassName("btn")

for (var i = 0; i < btnsArr.length; i++) {
    btnsArr[i].addEventListener("click", function () {
        Convert(btnsArr[i].innerHTML);
        return false;
    })
} ```

Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Aug 02 '21 at 14:11
_“it tells me that my buttons are undefined and cannot read their [`innerHTML` property]”_ — No; all it tells you is that `btnsArr[i]` is `undefined`. How are you concluding that `btnsArr[i]` is one of your buttons? Have you checked what `i` is? — Sebastian Simon, Aug 02 '21 at 14:20

score 0 · Answer 1 · answered Aug 02 '21 at 14:15

I can see a very common issue in the code, is that your array of elements (btnsArr) is used to define the maximum index for your for. The issue here is that btnsArr.length must be btnsArr.length - 1 instead.

why? if btnsArr has 3 elements it's range will be from 0 to 2, but your for is expecting from 0 to 3 (because btnsArr.length is 3). Then, probably it is failing in the last array element btnsArr[3] that does not exist.

I hope that it helps at least to cover some exception.

score 0 · Accepted Answer · answered Aug 02 '21 at 14:16

This is an issue of scoping in javascript aka closure inside loop problem. When getting to the function execution at runtime, i has completed its loop and is out of bound for the array.

You need to bound the variable:

for (var i = 0; i < btnsArr.length; i++) {
    (function(x) {
        btnsArr[x].addEventListener("click", function () {
            Convert(btnsArr[x].innerHTML);
            return false;
        });
    })(i)
}

Javascript: Uncaught type error: cannot read property innerHTML of undefined

2 Answers2