function inside another function doesn't work
<p>So I have this code: <a href="http://jsfiddle.net/7rGSb/1/" rel="nofollow">http://jsfiddle.net/7rGSb/1/</a></p>

<pre><code>var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000 / (volumeNew - volumeOld));
changeVolume();

function changeVolume() {
    volumeDiv.innerHTML = volumeOld;
    volumeOld++;
    if (volumeOld &lt;= volumeNew) setTimeout(changeVolume, timeNew);
};​
</code></pre>

<p>it's a string going from 8 to 37 in 1 second. It is working fine.</p>

<p>However when I try to put it into a click event handler ( <a href="http://jsfiddle.net/wH2qF/1/" rel="nofollow">http://jsfiddle.net/wH2qF/1/</a> ), it stops working:</p>

<pre><code>$(function() {
    $("#Volume").click(function() {

        setTimeout(triggerVolumeChange, 4000);

        function triggerVolumeChange() {

            var volumeDiv = document.getElementById("volumeNumber");
            var volumeOld = 8;
            var volumeNew = 37;
            var timeNew = (1000 / (volumeNew - volumeOld));
            changeVolume();

            function changeVolume() {
                volumeDiv.innerHTML = volumeOld;
                volumeOld++;
                if (volumeOld &lt;= volumeNew) setTimeout(changeVolume, timeNew);
            };

        };

    });
});​
</code></pre>

<p>Any idea why?</p>

<p>Is it because I'm calling <code>changeVolume();</code> inside another function? If so, how can I make that function work without having to call it?</p>
