title: Uncaught TypeError: Cannot read property 'getAttribute' of null at changeImage
body: <p>I am getting </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'getAttribute' of null at changeImage function in the browser control.</p>
  </blockquote>
  
  <p>But the slideshow is looks working fine. Dont know why this error msg is showing.
  can anyone tell why is it happening. </p>
  
  <p>My Code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src="images/1.jpg" alt="first Image" id="image" style="width:150px; height:150px;"&gt;    
  &lt;br/&gt;
  
  &lt;input type="button" value="start the slide" onclick="startSlideShow()"&gt;    
  &lt;input type="button" value="end the slide" onclick="stopSlideShow()"&gt;    
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var interValId;
  function startSlideShow() {
    setInterval(changeImage, 500);
  }
  
  function stopSlideShow() {
    clearInterval(interValId);
  }
  
  function changeImage() {
    var imageSource = document.getElementById("image").getAttribute("src");
    var currentImageNumber = imageSource.substring(imageSource.lastIndexOf("/") + 1, imageSource.lastIndexOf("/") + 2);
  
    if (currentImageNumber == 7) {
      currentImageNumber = 0;
    }
    document.getElementById("image").setAttribute("src", "images/" + (Number(currentImageNumber) + 1) + ".jpg");
  }    
  </code></pre>