title: Make button change output every 3rd click
body: <p>When "button" is clicked in my script it brings back an image file ("#mypic"), a sound file ("#mysoundclip") and a class that styles a word to spell ("#picknext").</p>
  
  <p>The thing is, I want the button to repeat its action 3 times before moving on to the next image, sound and style. How would I do this?</p>
  
  <pre><code>$('#pickNext').click(function() {
  // remove the class from all td's
  $('td').removeClass('spellword');
  // pick a random word
  var r = rndWord;
  while (r == rndWord) {
      rndWord = Math.floor(Math.random() * (listOfWords.length));
  }
  // apply class to all cells containing a letter from that word
  $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
  
  });
  
  
  var audio = $("#mysoundclip")[0];
  var i  = 0;
  $(".minibutton").click(function() {
  var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
  if (noExist &amp;&amp; i &gt;= 3) {
      $('#pickNext').click();
      i = 0;
  } else {
  
      $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
      audio.play();
      pic = $("#mypic").attr('src', listOfWords[rndWord].pic);
      pic.show();
      $i++;
  }
  });
  </code></pre>