Empty array when using getElementsByTagName

Question

How to I loop through the elements retrieved using document.getElementsByTagName(); as it's length is coming out to be 0 but still has elements.

Below is the JS code:

class HKPlayer
{
    constructor()
    {
        this.getPlayers();
        this.getPlayerAttributes();
    }
    getPlayers()
    {
        this.players = document.getElementsByTagName("HKPlayer");
    }
    getPlayerAttributes()
    {
        console.log(this.players);
    }
}
(function () {
    new HKPlayer();
})();

below is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HKPlayer Demo</title>
    <script src="dist/HKPlayer.js" type="text/javascript"></script>
</head>
<body>
    <HKPlayer type="video" theme="dark" src="assets/video/1.mp4"></HKPlayer>
    <br/>
    <HKPlayer type="video" theme="dark" src="assets/video/2.mp4"></HKPlayer>
</body>
</html>

The output is like:

I cannot loop through this.players as the array this.players array is empty. how do I do that.

Is the DOM loaded at the point of execution? If not, it’s a dupe of Why does jQuery or a DOM method such as getElementById not find the element?; otherwise, likely a dupe of Is Chrome's JavaScript console lazy about evaluating arrays?. — Sebastian Simon
– Sebastian Simon, Commented Oct 4, 2017 at 17:47

comesuccingfuccslot · Accepted Answer · 2017-10-04 18:12:54Z

1

You're executing your JS before the DOM is loaded.

Try wrapping this part of your code:

(function () {
    new HKPlayer();
})();

Inside this:

document.onreadystatechange = function()
{
    if(document.readyState === 'complete')
    {
        // Put your code that relies on a complete/ready DOM here.
    }
}

EDIT: As a response to the comment, no this is not 100% cross-browser, nor will it always work. If you want as much browser-support as possible, you'd most likely want to use the following methods:

document.addEventListener('DOMContentLoaded', fn, false);

with a fallback to:

window.addEventListener('load', fn, false )

or for older versions of IE:

document.attachEvent("onreadystatechange", fn);

with a fallback to:

window.attachEvent("onload", fn);

This is apparently how jQuery handles its $(document).ready(). More information about this can be found here.

edited Oct 4, 2017 at 18:12

answered Oct 4, 2017 at 17:56

comesuccingfuccslot

7177 silver badges16 bronze badges

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

1 Comment

Shakti Phartiyal Over a year ago

Thank you, that resolves the issue. I hope that this is cross browser compatible. and "always works" ?

Ferhat BAŞ · Accepted Answer · 2017-10-04 17:49:33Z

0

Array is not empty it has length and two items as i saw on your attached picture, i think you can access this.player.length and this.player[0] in getPlayerAttributes function. If you

answered Oct 4, 2017 at 17:49

Ferhat BAŞ

7977 silver badges12 bronze badges

2 Comments

Shakti Phartiyal Over a year ago

this.players.length returns 0

Ferhat BAŞ Over a year ago

If you call your code in onload or click event then you can reach your array. @Xufox explanation is right, when run your code that time html element could not be generated but you can see in chrome tools because when you saw it it is already genrated we see evaluted value in console

Collectives™ on Stack Overflow

Empty array when using getElementsByTagName

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related