title: Auto-Play feature not executing in JS
body: <p>I have somewhat of a baseball game, obviously there are not bases or hits. Its all stikes, balls and outs. The buttons work and the functionality of the inning (top and bottom as well as count) are working. I want this to ideally randomly throw a pitch on its own every few seconds. Basically to randomly "click" the ball or strike button. I am trying to use the setTimeout function with no success. Any help?</p>
  
  <p>HTML: </p>
  
  <pre><code>  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="bullpen.css"&gt; 
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Bullpen&lt;/title&gt;
      &lt;/head&gt;
  &lt;/html&gt;
      &lt;body&gt;
  
          &lt;button id=buttons onclick="playBall()"&gt;Auto-Play&lt;/button&gt;
          &lt;h2&gt;Inning: &lt;span id=inningHalf&gt;&lt;/span&gt; &lt;span id=inningNum&gt;&lt;/span&gt;&lt;/h2&gt;
  
      &lt;div id=buttons&gt;
          &lt;button onclick="throwBall(), newInning()"&gt;Ball&lt;/button&gt;
          &lt;button onclick="throwStrike(), newInning()"&gt;Strike&lt;/button&gt;
      &lt;/div&gt;
  
          &lt;h2&gt;Count: &lt;span id=ball&gt;0&lt;/span&gt; - &lt;span id=strike&gt;0&lt;/span&gt;&lt;/h2&gt;
          &lt;h2&gt;Outs: &lt;span id=out&gt;0&lt;/span&gt;&lt;/h2&gt;
  
          &lt;h2&gt;----------------&lt;/h2&gt;
  
          &lt;h2&gt;Walks: &lt;span id=walks&gt;0&lt;/span&gt;&lt;/h2&gt;
          &lt;h2&gt;Strikeouts: &lt;span id=strikeout&gt;0&lt;/span&gt;&lt;/h2&gt;
  
          &lt;script src="bullpen.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>  var ball = 0;
  var strike = 0;
  var out = 0;
  var walks = 0;
  var strikeout = 0;
  //---------------------------------
  var outPerInning = 0;
  var inning = 1;
  //---------------------------------
  document.getElementById('inningNum').innerHTML = inning;
  document.getElementById('inningHalf').innerHTML = '▲';
  
  function throwBall(){
      ball++;
      document.getElementById('ball').innerHTML = ball;
  
      if (ball == 4){
      ball = 0;
      strike = 0;
      walks++;
  
      document.getElementById('walks').innerHTML = walks;
      document.getElementById('strike').innerHTML = 0;
      document.getElementById('ball').innerHTML = 0;
      }
  };
  
  function throwStrike(){
      strike++;
      document.getElementById('strike').innerHTML = strike;
  
      if(strike == 3){
      ball = 0;
      strike = 0;
      strikeout++; 
  
      out++;
      outPerInning++;
  
      document.getElementById('strikeout').innerHTML = strikeout;
      document.getElementById('out').innerHTML = out;
      document.getElementById('strike').innerHTML = 0;
      document.getElementById('ball').innerHTML = 0;
      } 
  };
  
  
  function newInning(){
      if(out == 3){
      ball=0;
      strike=0;
      out=0;
  
      document.getElementById('strike').innerHTML = 0;
      document.getElementById('ball').innerHTML = 0;
      document.getElementById('out').innerHTML = 0;
      }
  
      if(outPerInning == 3){
      document.getElementById('inningHalf').innerHTML = '▼';
      }
  
      if(outPerInning == 6){
          inning++;
      document.getElementById('inningHalf').innerHTML = '▲';
          outPerInning = 0;
      document.getElementById('inningNum').innerHTML = inning;
      } 
  };
  
  function playBall(){
      var play = Math.random;
      if(play &gt;= 0.4){
          throwStrike();
          newInning();
      }
      else{
          throwBall();
          newInning();
      }
  
      setTimeout(playBall, 5000);
  };
  </code></pre>
  
  <p>CSS if needed:</p>
  
  <pre><code>    h2{
      margin-left: 50px;
      font-size: 50px;
  }
  
  button{
      font-size: 45px;
  }
  
  #buttons{
      width: 227px;
      margin-left:50px;
      margin-top: 20px;
  }
  </code></pre>