CODEWITHSUNDEEP
javascript
ttothec
ttothec

Reputation: 343

function inside another function doesn't work

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?

Upvotes: 0

Views: 105

Answers (2)

I Hate Lazy
I Hate Lazy

Reputation: 48761

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.

Upvotes: 4

Sushanth --
Sushanth --

Reputation: 55740

Why do you have Nested functions when not required in this scenario..

Move the function declarations to the outside

$(function() {
    $("#Volume").click(function() {
        setTimeout(triggerVolumeChange, 4000);
    });
});

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

function triggerVolumeChange() {
    timeNew = (1000 / (volumeNew - volumeOld));
    changeVolume();
};

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

Also make sure the Framework is set to jQuery ..

Check Fiddle

Upvotes: 1

Related Questions