title: W3 Slider - Uncaught TypeError: Cannot read property 'className' of undefined
body: <p>I have a failure message in my console. It says:</p>
  <pre><code>script.js:151 Uncaught TypeError: Cannot read property 'className' of undefined
      at showSlides (script.js:151)
      at script.js:126
  </code></pre>
  <p>Its about a Slider I got from W3 School (<a href="https://www.w3schools.com/howto/howto_js_slideshow.asp" rel="nofollow noreferrer">Link</a>)</p>
  <p>I changed a bit the Code from W3 and it shows me that Message in the Console. Also if i click on one arrow in the slider this will show in the Console:</p>
  <pre><code>Uncaught TypeError: dots[(slideIndex - 1)] is undefined
      showSlides http://127.0.0.1:57616/js/script.js:151
      &lt;anonymous&gt; http://127.0.0.1:57616/js/script.js:126
  script.js:151:5
  </code></pre>
  <p>I feel like I'm missing something or forgot about something to change in the JavaScript. Unfortunately I'm not that good in coding in JS.. So I hope somebody could help me with the problem! Thanks a lot!</p>
  <p>HTML</p>
  <pre><code> &lt;div class=&quot;slideshow-container&quot;&gt;
                  &lt;!-- Full-width images with number and caption text --&gt;
                  &lt;div class=&quot;mySlides fade&quot;&gt;
                      &lt;img src=&quot;/img/szene2-werkzeuge.png&quot; style=&quot;width:100%&quot;&gt;
                      &lt;p class=&quot;caption-text&quot;&gt;Werkzeuge&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;mySlides fade&quot;&gt;
                      &lt;img src=&quot;/img/szene2-feuer.png&quot; style=&quot;width:100%&quot;&gt;
                      &lt;p class=&quot;caption-text&quot;&gt;Feuer&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;mySlides fade&quot;&gt;
                      &lt;img src=&quot;/img/szene2-ziege.png&quot; style=&quot;width:100%&quot;&gt;
                      &lt;p class=&quot;caption-text&quot;&gt;Nutztiere&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Next and previous buttons --&gt;
                  &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1)&quot;&gt;&amp;#10094;&lt;/a&gt;
                  &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1)&quot;&gt;&amp;#10095;&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.slideshow-container {
  z-index: 20;
  max-width: 400px;
  position: absolute;
  margin: auto;
  top: 45%;
  left: 45%;
  background-image: url(/img/szene2-slider-BG.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center;
  background-size: 100%; }
  
  /* Hide the images by default */
  .mySlides {
      display: none;
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 50%;
      user-select: none;
      background-color: #c7113c;
  }
  
  /* Position the &quot;next button&quot; to the right */
  .next {
      right: 0;
      border-radius: 50%;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
      background-color: #333333;
  }
  
  .caption-text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: -10px;
      width: 100%;
      text-align: center;
  }
  
  /* The dots/bullets/indicators */
  .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
      background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  
  @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  </code></pre>
  <p>and JS:</p>
  <pre><code> // SLIDER 
  
  var slideIndex = 1;
  showSlides(slideIndex);
  
  // Next/previous controls
  function plusSlides(n) {
      showSlides(slideIndex += n);
  }
  
  // Thumbnail image controls
  function currentSlide(n) {
      showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName(&quot;mySlides&quot;);
      var dots = document.getElementsByClassName(&quot;dot&quot;);
      if (n &gt; slides.length) {slideIndex = 1}
      if (n &lt; 1) {slideIndex = slides.length}
      for (i = 0; i &lt; slides.length; i++) {
          slides[i].style.display = &quot;none&quot;;
      }
      for (i = 0; i &lt; dots.length; i++) {
          dots[i].className = dots[i].className.replace(&quot; active&quot;, &quot;&quot;);
      }
      slides[slideIndex-1].style.display = &quot;block&quot;;
      dots[slideIndex-1].className += &quot; active&quot;;
  }
  </code></pre>