title: Change innerHTML when display style of certain element is "block"
body: <p>I have this "slideshow" here where you can get to the next slide by click. I want to have the same button but different text for every image. So I tried to change the innerHTML of the "active" var when one of the "mySlides" vars is set to block.
  But it won't recognize it.. Can you help me?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// JavaScript Document
  
  var active = document.getElementById("active"),
     x = document.getElementsByClassName("mySlides");
  
  var slideIndex = 1;
   showDivs(slideIndex);
  
  function plusDivs(n) {
   showDivs(slideIndex += n);
  }
  
  function currentDiv(n) {
   showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
   var i,
    dots = document.getElementsByClassName("demo");
    
   
   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";
   }
   
   for (i = 0; i &lt; dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
   }
    
   x[slideIndex-1].style.display = "block";
   dots[slideIndex-1].className += " w3-white";
  }
  
  
  function visible() {
   
   if (x[0].style.display = "block") {
    active.innerHTML = "test";
   }
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="w3-content w3-display-container"&gt;
   &lt;div id ="slider-wrapper"&gt;
    &lt;img id="img1" class="centerscreen mySlides slidepos fade" src="x.jpg" alt="picture1"&gt;
    &lt;img id="img2" class="centerscreen mySlides slidepos fade" src="xy.jpg" alt="picture2"&gt;
    &lt;img id="img3" class="centerscreen mySlides slidepos fade" src="xyz.jpg" alt="picture3"&gt;&lt;/div&gt;
    &lt;div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos"&gt;
      &lt;span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"&gt;&lt;/span&gt;
      &lt;span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"&gt;&lt;/span&gt;
      &lt;span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"&gt;&lt;/span&gt;
    &lt;/div&gt;
      &lt;container id="buttons" class="centerscreen"&gt;
      &lt;div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)"&gt;&amp;#10094;&lt;/div&gt;
      &lt;div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)"&gt;&amp;#10095;&lt;/div&gt;
   &lt;/container&gt;
  &lt;/div&gt;
  
  &lt;div id="active"&gt;
   Centerbutton
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>