37
  var eval_table = document.getElementsByClassName("evaluation_table");
  console.log(eval_table);

This displays as:

[item: function, namedItem: function]0: 
    table.widefat.fixed.evaluation_table
    length: 1
    __proto__: HTMLCollection

However, when I try to get a length of eval_table, eval_table.length, it returns a value of 0. I've used this approach before, had no issues with this approach before. Is there anything wrong with what I'm trying to achieve above?

7
  • 3
    Works fine. Perhapes, a typo in your code?
    – alexP
    Commented May 13, 2015 at 10:07
  • Nope, no typo, perhaps my environment, working in wordpress, although this shouldn't affect vanilla javascript? @alexP Commented May 13, 2015 at 10:08
  • 1
    maybe your js is executed before the elements are created?
    – user757095
    Commented May 13, 2015 at 10:10
  • No, it shouldn't. Are the elements already in the DOM when you're calling the function?
    – alexP
    Commented May 13, 2015 at 10:10
  • 1
    See this example: fiddle.jshell.net/7hc3qrhu/3 - the code has been moved to head, so it executes before the elements are in the DOM (logs an empty array and 0 for length), but once you expand the collection in console the elements show up, because it shows the state of the object at the moment of expasion, and it is a live collection.
    – pawel
    Commented May 13, 2015 at 10:21

3 Answers 3

72

This is because your JS is running before the elements are rendered to the DOM. I bet the script you have running is loaded before the <body> of your html. You have two options:

  1. Add the self-executing <script> as the last thing in your <body> tag or;
  2. Wrap your function so that it waits for the DOM to be loaded before executing. You can do this with either:
    • jQuery's $(document).ready or
    • if you're not running jQuery: document.addEventListener("DOMContentLoaded", function(e) {// do stuff })

Code sample below:

<html>
  <head></head>
  <script>
    document.addEventListener("DOMContentLoaded", function(e) {
      var eval_table = document.getElementsByClassName('evaluation_table');
      console.log(eval_table, eval_table.length);
    });
  </script>
  <body>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
  </body>
</html>
5
  • 4
    Thank you so much. You made my day. I would have accepted this answer. Commented Jun 16, 2016 at 11:10
  • 2
    Well now I feel like a moron. Tried so many different solutions and it turned out they would probably have all worked, and I just needed to wait for the document to be ready! Doh!
    – Olly John
    Commented Jan 16, 2018 at 7:34
  • @blankmaker Thanks for this answer. Can you please have a look, this one is related to above question -> stackoverflow.com/questions/60601380/… Commented Mar 9, 2020 at 13:16
  • 3
    @blankmaker This still didn't help me, I'm still getting length 0 whereas a I can see 3 elements in it.
    – DLV
    Commented Jul 14, 2021 at 4:39
  • THANK YOU I've been searching for hours for this Commented Feb 24, 2022 at 20:10
5

In order to access the element at position 0 of HTMLCollection you should use

        setTimeout(() => {
          let elms = document.getElementsByClassName('ClassName').item(0)
        }, 0);

Using setTimeout to make sure DOM is finished render.

4
  • 3
    This is an awful solution Commented Jun 11, 2019 at 8:45
  • 3
    Could be worse, though Commented Oct 7, 2019 at 9:29
  • at least it works
    – DonMB
    Commented Apr 19, 2022 at 14:24
  • still works, even in Angular Commented Apr 30 at 10:02
1

You could write the code inside the

$('document').ready(function(){
         // your code
   });

or on body onload or on DOM ready

<body>
Your HTML here

<script>
// self executing function here
(function() {
    var eval_table = document.getElementsByClassName("evaluation_table");
    console.log(eval_table,eval_table.length);
})();
</script>
</body>

I have tried in this jsFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.