title: calling function inside script tag not working
body: <p>i have created an automated slideshow which should change the picture after every 2 secs;
  i call the function changeSlide() at first then it should recursively call itself using the function setTimeout. but this doesn't work when page is first started or the page is refreshed.</p>
  
  <p>but when i click on the button it starts working.</p>
  
  <pre><code>let slideIndex = 0;
  
      changeSlide();
  
      function changeSlide(){             
          slideIndex++;
  
          let images = document.getElementsByClassName('image');      
          for (let i = 0; i&lt;images.length;i++){
              images[i].style.display="none";
          }
  
          if (slideIndex&gt;= images.length){
              slideIndex = 0;
          }
  
          images[slideIndex].style.display = "block"; 
          setTimeout(changeSlide,2000);
  
      }
  </code></pre>
  
  <p>This is my html code.</p>
  
  <pre><code>&lt;div class="w3-display-container w3-content"&gt;
          &lt;img class="image" src="city.jpg" style="width: 100%;height:500px;" &gt;
          &lt;img class="image" src="profile.png" style="width: 100%; height:500px;display:none;" &gt;
          &lt;img class="image" src="img_girl.jpg" style="width: 100%;height:500px; display:none;" &gt;
  
      &lt;/div&gt;
      &lt;button onClick="changeSlide()"&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>i want my slideshow to start as soon as i start my page.</p>