title: Function doesn't recognize global variable for play/pause slideshow
body: <p>I'm trying to create a play/pause button for my javascript slideshow, but the button has stalled my progress because of some scope issues. I toggle between two string values by clicking the element <code>play</code>. While the function <code>slideshow</code> does print out <code>working</code>, it fails to print the state out and execute the function. </p>
  
  <p>Here is the fiddle with the gallery:</p>
  
  <p><strong><a href="https://jsfiddle.net/u9gqct9v/" rel="nofollow noreferrer">Fiddle live example</a></strong></p>
  
  <p>I would really appreciate your help</p>
  
  <pre><code>var state='play'
  slideshow()
  
  pause.onclick=function(){
      console.log(state)
      if (state=='play')
      {
          state='pause'
      }
      else{
          state='play'
      }
  }
  
  function slideshow(){
      console.log('working')
      if (state == 'play'){
          console.log('play')
          var pic='&lt;img src="'+ images[slide]+'"&gt;'
              gallery.innerHTML=pic
              slide+=1;
              console.log(slide)
              if(slide-1==length){
                  slide=0
              setTimeout(slideshow, 3000); 
              }   
          }
      }
  </code></pre>