Using clearInterval to stop a function
<p>I have a function that displays words at various speeds. The function starts OK, but I can't seem to get the code right to stop it again. 
I know I have to use clearInterval and I assume that this is to clear the var myTimer - but I can't get this to work.</p>

<p>Any help would be appreciated</p>

<p>HTML</p>

<pre><code>&lt;input type="button" value="Start" onclick="wpm($numberWords,$speed)" /&gt;
&lt;input type="button" value="Stop" onclick="stopWpm()" /&gt;
</code></pre>

<p>JS</p>

<pre><code>var myTimer;

function wpm(numberWords,speed) {

    var input = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s");

    var output = new Array();
    for (var i = 0; i &lt; input.length; i += numberWords) {
        output.push(input.slice(i, i + numberWords).join(" "));
    }

    var i=0;
    var myTimer =setInterval(timer,speed); //1000 will run it every 1 second
    function timer() {
        document.getElementById("timer").innerHTML = output[i];
        i++;
        if (i == output.length){
            clearInterval(myTimer);
        }
    }
}   

function stopWpm() {
    clearInterval(myTimer);
}
</code></pre>
