title: Show image ( 5 seconds then hide) , click show image ( to see next image) ?
body: <p>I'm new to this. I am trying to create a HTML code which runs in HTML. It shows a image for 5 seconds and hides, next image is shown via button. </p>
  
  <p>I found most of the codes via online. Can someone see where i am going wrong here. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;button id="next" onclick="showNext();"&gt;Show next image&lt;/button&gt;
  
  &lt;div class="image" style="display: none;"&gt;&lt;img src=“1.jpg”&gt;&lt;/div&gt;
  &lt;div class="image" style="display: none;"&gt;&lt;img src=“2.jpg”&gt;&lt;/div&gt;
  &lt;div class="image" style="display: none;"&gt;&lt;img src=“3.jpg”&gt;&lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
      var divs = document.querySelectorAll('div.image');
  
  
      var button = document.getElementById('next'); //button.
      var currentImage = 0;
      function showNext() {
          button.style.display = 'inline';
          divs[currentImage].style.display = 'block';
          setTimeout(hide, 5000);
      }
  
      function hide() {
          button.style.display = 'block';
          divs[currentImage].style.display = 'none';
          currentImage = (currentImage + 1) % divs.length;
      }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>this is the JS that is used </p>
  
  <pre><code>var divs = document.querySelectorAll(‘image'); 
      var button = document.getElementById('next'); 
      var currentImage = 0;
      function showNext() {
          button.style.display = 'inline';
          divs[currentImage].style.display = 'block';
          setTimeout(hide, 500000);
      }
  
      function hide() {
          button.style.display = 'block';
          divs[currentImage].style.display = 'none';
          currentImage = (currentImage + 1) % divs.length;
      }
  </code></pre>