Make button change output every 3rd click
<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>
