document.getElementsByClassName creates null array when the class exists in HTML

Question

I am following W3Schools' tutorial on creating a Slideshow in HTML/CSS/Javascript, located here. In the HTML code, I have created several elements that are within the mySlides class; however, when I call document.getElementsByClassName("mySlides") I get a null array.

Here is some of the HTML code of elements within the mySlides class:

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

Here is the Javascript code where I call upon accessing the mySlides elements:

var slides = document.getElementsByClassName("mySlides");
console.log(slides.length); // prints "0"
console.log(slides[0]); // prints "undefined"

Any ideas on why document.getElementsByClassName("mySlides") isn't able to access the mySlides elements? Thank you for your help.

When is the javascript being executed? Does the DOM contain the `mySlides` div at the time that it is called? — Chase DeAnda, Jul 24 '18 at 17:01
Have a look at the position of the `` element in the _"Try it yourself"_ example — Andreas, Jul 24 '18 at 17:03
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Jul 24 '18 at 17:09

Mamun · Accepted Answer · 2018-07-24T17:20:00.327

The HTML document might not be ready by the time your script is executed. If so, you have to execute code after DOMContentLoaded.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", function(event) {
  var slides = document.getElementsByClassName("mySlides");
  console.log(slides.length);
  console.log(slides[0]);
});

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

Yes you're right, thank you! The DOMContentLoaded should do the trick! — tennis25, Jul 24 '18 at 17:08

score 1 · Answer 2 · answered Jul 24 '18 at 17:03

The DOM may not be fully loaded when your script is executed. Either place your script tag after the DOM elements or add an event listener for DOMContentLoaded in which to execute your function.

Adding event listener for DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(e){
  var slides = document.getElementsByClassName("mySlides");
console.log(slides.length); 
console.log(slides[0]); 
});

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

Since HTML documents are parsed from top to bottom, placing the script tag after the DOM elements will allow it to execute after the elements are successfully loaded into the document.

 <div class="mySlides fade">
        <div id="intro">
            <p>Click to Start!</p>
            <button type="button" id="startButton" onclick="start()">Start!</button>
        </div>
    </div>
 <script>
 document.addEventListener("DOMContentLoaded", function(e){
      var slides = document.getElementsByClassName("mySlides");
    console.log(slides.length); 
    console.log(slides[0]); 
    });
 </script>

You can use jQuery's $(document).ready() to ensure that all DOM elements have been loaded.

 $(document).ready(function(){
          var slides = document.getElementsByClassName("mySlides");
        console.log(slides.length); 
        console.log(slides[0]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mySlides fade">
            <div id="intro">
                <p>Click to Start!</p>
                <button type="button" id="startButton" onclick="start()">Start!</button>
            </div>
        </div>

Thanks so much, the DOMContentLoaded solves the problem! – tennis25 Jul 24 '18 at 17:09 — tennis25, Jul 24 '18 at 17:09

document.getElementsByClassName creates null array when the class exists in HTML

2 Answers2