javascript - Can not stop the slider -

trying make simple gallery. there button turns image <button class = "play-pause">play</ button>. clicking on starts setinterval, when pressed again need have stopped. how can done?

here's link sandbox: http://jsfiddle.net/el31q3eq/

my attempt:

document.queryselector('.play-pause').addeventlistener('click', function() {     if(timer == null) clearinterval(timer);      this.innerhtml = "pause";      timer = setinterval(function() {         = (i < images.length - 1) ? ++i : 0;         img.src = images[i];     }, 1000);      timer = null; }); 

the issue clearinterval takes interval object argument, , clears it. you're setting timer null, you're asking clear null means won't anything.

windowtimer.clearinterval - mdn

you need use variables check status of play/pause button.

document.queryselector('.play-pause').addeventlistener('click', function() {  if(playing === true) {     this.innerhtml = 'play';     clearinterval(timer);     playing = false;     return; }  this.innerhtml = "pause";  timer = setinterval(function() {     = (i < images.length - 1) ? ++i : 0;     img.src = images[i]; }, 1000);  playing = true; 

});

http://jsfiddle.net/el31q3eq/2/