Uncaught TypeError: Cannot read property 'getAttribute' of null at changeImage

Question

I am getting

Uncaught TypeError: Cannot read property 'getAttribute' of null at changeImage function in the browser control.

But the slideshow is looks working fine. Dont know why this error msg is showing. can anyone tell why is it happening.

My Code.

HTML:

<img src="images/1.jpg" alt="first Image" id="image" style="width:150px; height:150px;">    
<br/>

<input type="button" value="start the slide" onclick="startSlideShow()">    
<input type="button" value="end the slide" onclick="stopSlideShow()">

JS:

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");
}

My best guess is where you call the function changeImage. I.e, you all calling the function before the tag appear, which results in document.getElementById returns nothing — Tree Nguyen, Feb 19 '18 at 06:39
Possible duplicate of [Uncaught TypeError: Cannot read property 'getAttribute' of null](https://stackoverflow.com/questions/1829925/javascript-getelementbyid-not-working) — Durga, Feb 19 '18 at 06:41
This code runs fine for me (except that the Stop button doesn't work because you're not setting `interValId`). — jdigital, Feb 19 '18 at 18:40

Roko C. Buljan · Answer 1 · 2018-02-19T06:56:57.627

3

Exactly what it says

(null).getAttribute("src")

therefore wherever you're calling changeImage() (you didn't demonstrate that in your question) there's no such element in the DOM, or the DOM was not ready to be manipulated.

DOM not ready but changeImage() is called
DOM is ready
Interval now triggers another changeImage()
Element is found
Slider now works but you still have the previous error in console

A failsafe would be best:

function changeImage() {
  var image = document.getElementById("image");
  if (!image) return; // failsafe

  // other code here

}

and always place your <script> right before the closing </body> tag.

Additionally, for separation of concerns and better code architecture try to abandon inline style and scripting like onclick for a better alternative like Element.addEventListener right from your JS code:

var btnPlay = document.getElementById("play");
btnPlay.addEventListener("click", startSlideShow);

HTML:

<button id="play">PLAY</button>

edited Feb 19 '18 at 06:56

answered Feb 19 '18 at 06:42

Roko C. Buljan

196,159
39
305
313

Not necessary. Please check my answer. – Randy Casburn Feb 19 '18 at 06:50
@RandyCasburn yeah, great catch, but it still ignores the fact that DOM was not ready. – Roko C. Buljan Feb 19 '18 at 06:52
DOM doesn't have to be ready - with the fix, the functions _cannot_ be called until after the DOM is loaded. I get where you are with this, but this isa simple problem. They'll be back to ask about "script tag before closing body" thing :-) – Randy Casburn Feb 19 '18 at 06:54
_"A failsafe would be best_": it would be better to understand and fix the problem, not hack around it. This is not an issue about the DOM being ready, since the script doesn't run until the user presses the button. There must be some other code that the OP isn't showing us. – jdigital Feb 19 '18 at 18:31

Uncaught TypeError: Cannot read property 'getAttribute' of null at changeImage

1 Answers1