Question

So I have this code: http://jsfiddle.net/7rGSb/1/

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 <= volumeNew) setTimeout(changeVolume, timeNew);
};​

it’s a string going from 8 to 37 in 1 second. It is working fine.

However when I try to put it into a click event handler ( http://jsfiddle.net/wH2qF/1/ ), it stops working:

$(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 <= volumeNew) setTimeout(changeVolume, timeNew);
            };

        };

    });
});​

Any idea why?

Is it because I’m calling changeVolume(); inside another function? If so, how can I make that function work without having to call it?

Answer 1

You have MooTools selected, but it looks like you’re using jQuery’s .ready() and DOM selection syntax.

Choose one of the jQuery options from the menu on the left. Or get rid of the outer $(function() {...}); and update the selection/handler code.