lesson09/getElementByTagName.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cool slide show</title>
    <script type="text/javascript">
      //var numslides = 0;
      //var currentslide = 0;
      //var slides = new Array();
      function StartSlideShow() {
        let numslides = 0;
        let currentslide = 0;
        let slides = new Array();
        //get all element Tag Name with img, and save under img 
        let img = document.getElementsByTagName('img');
        console.log('img number : ' + img.length);
        //loop number of img
        for (let i=0;i<img.length;i++) {
          //assign array slides as array img array did not set img as array seperatley but define here
          slides[i] = img[i];
          if (numslides == 0) {
            //all img tag became array, change style.display as block, block makes display one img max in one section
            img[i].style.display = 'block';
            console.log('slides id: ' +slides[i]);
          } else {
            //if img is not starting from 0, display nothing
            img[i].style.display = 'none';
          }
          //in current img tag, once mouce is over img make pointer cursor
          img[i].style.cursor = 'pointer';
          //onclick event in current img, call NextSlide function
          img[i].onclick = NextSlide;
          //increment numslides 
          numslides++;
        }
          function NextSlide() {
            slides[currentslide].style.display = 'none';
            currentslide++;
            console.log('currentslide: ' + currentslide);
            //if current slide is greater or equal then number of slide, set current slide as 0 again, 
            //so make it recursive again
            if (currentslide >= numslides) currentslide = 0;
            slides[currentslide].style.display = 'block';
          }        
        
      } 
    </script>
  </head>
  <!--instead of window.onload = StartSlideShow; call onload in HTML tag -->
  <body onload = "StartSlideShow()">
    <h2>CIW JavaScript Specialist</h2>
    <h3>Cool slide show</h3>
    <img class="slide" src="images/pic1.jpg" width="400" height="300" alt="First picture">
    <img class="slide" src="images/pic2.jpg" width="400" height="300" alt="Second picture">
    <img class="slide" src="images/pic3.jpg" width="400" height="300" alt="Third picture">
    <img class="slide" src="images/pic4.jpg" width="400" height="300" alt="Fourth picture">
    <img class="slide" src="images/pic5.jpg" width="400" height="300" alt="Fifth picture">
    <p>Click the image to advance the slides.</p>
  </body>
</html>