title: Vanilla JS - slider - Active dots
body: <p>Please, can you help me assign .active class to slider Dots, which are generated by JS, they are not part of HTML. When slide 1 is active, I need dot 1 to have class .active, but no luck.. all solutions I have foud are for dots hardcoded in HTML.</p>
  
  <p>My HTML:</p>
  
  <pre><code>  &lt;div class="w3-content w3-display-container"&gt;
      &lt;div class="w3-display-container mySlides"&gt;
          &lt;div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black"&gt;
              &lt;h3&gt;Slide 1&lt;/h3&gt;
              &lt;p&gt;1. Lorem Ipsum.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w3-display-container mySlides"&gt;
          &lt;div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black"&gt;
              &lt;h3&gt;Slide 2&lt;/h3&gt;
              &lt;p&gt;2.Lorem Ipsum.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w3-display-container mySlides"&gt;
          &lt;div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black"&gt;
              &lt;h3&gt;Slide 3&lt;/h3&gt;
              &lt;p&gt;3. Lorem Ipsum.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)"&gt;&amp;#10094;&lt;/button&gt;
      &lt;div id="js-slider-dots"&gt;&lt;/div&gt;
      &lt;button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)"&gt;&amp;#10095;&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My JS (which switch the slides and generate dots):</p>
  
  <pre><code>var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
      showDivs(slideIndex += n);
  }
  
  function goToDiv(n) {
      showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n &gt; x.length) { slideIndex = 1 }
      if (n &lt; 1) { slideIndex = x.length }
      for (i = 0; i &lt; x.length; i++) {
          x[i].style.display = "none";
      }
      x[slideIndex - 1].style.display = "block";
  }
  
  function generateDots() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i &lt; x.length; i++) {
          var dotNumber = i + 1;
          var dot = document.createElement('span');
          dot.innerHTML =
              '&lt;button class="js-dot" onclick="goToDiv(' + dotNumber + ')"&gt;' + dotNumber + '&lt;/button&gt;';
  
          document.getElementById('js-slider-dots').appendChild(dot);
  
      }
  }
  generateDots();
  </code></pre>
  
  <p>It is also all live on JS Bin: <a href="https://jsbin.com/ketohatane/edit?html,js,output" rel="nofollow noreferrer">https://jsbin.com/ketohatane/edit?html,js,output</a></p>