Array Index Value Undefined, Array Isn't

Question

If you need more background information just ask.

Javascript:

<script type="text/javascript>
var buttons = document.getElementsByClassName("_jvpff");
console.log(buttons);
console.log(buttons[0]); //added after error from command below
console.log(buttons[0].innerHTML);
</script>

Console:

enter image description here

HTML:

enter image description here

The array contains valid elements, but when trying to access an element with an index, it returns undefined.

Thanks.

• Rayon: Working fine for me... jsfiddle.net/rayon_1990/z3p3aa7r
• deceze: @torazaburo document.getElementsByClassName returns a LIVE HTML Node List which updates as elements become available, and the console has its own quirks for when the contents of an object are evaluated and updated. If button[0] is undefined at the time of trying to access it, then it's undefined at that time.
• Shomz: @deceze, that's it - why don't you write it as an answer?
• Shomz: @TomBurris I'll be willing to bet that it is. :) You'll be surprised if you haven't seen that console behaviour before.
• shamsup: since react is dynamic, it's highly likely that your element doesn't exist when that script runs if you just include the script on the page.

Answer 1

document.getElementsByClassName returns a live HTMLNodeList which updates as elements become available, and the console has its own quirks for when the contents of an object are evaluated and updated. If button[0] is undefined at the time of trying to access it, then it's undefined at that time. Which means you need to wait with your script execution until the DOM is ready and the element actually exists. Either put your scripts at the bottom of the page, or wait for the DOM to be ready by listening for the DOMContentLoaded event.