Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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, 2018 at 17:01
                Have a look at the position of the <script></script> element in the "Try it yourself" example
– Andreas
                Jul 24, 2018 at 17:03
                Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element?
– Andreas
                Jul 24, 2018 at 17:09
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>
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 id="intro">
            <p>Click to Start!</p>
            <button type="button" id="startButton" onclick="start()">Start!</button>
 <script>
 document.addEventListener("DOMContentLoaded", function(e){
      var slides = document.getElementsByClassName("mySlides");
    console.log(slides.length); 
    console.log(slides[0]); 
 </script>
 $(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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.