function inside another function doesn't work

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?

@Sushanth-- My guess would be scoping, or accident. Functions are nested all the time, although sometimes it isn't as obvious as this. — Dave Newton
– Dave Newton, Commented Dec 14, 2012 at 23:14
I'm very new to JS so I appologize for the way the code is structured... maybe that's why it doesn't work... any ideas on how to fix it? I basically need that string to go from 8-37 4 seconds after the user clicks the button... (it's for a simulation environment of an application I'm designing) — ttothec
– ttothec, Commented Dec 14, 2012 at 23:14
@DaveNewton .. yup that's right.. But i do not see a see a reason to nest the functions in the OP's scenario — Sushanth --
– Sushanth --, Commented Dec 14, 2012 at 23:19

I Hate Lazy · Accepted Answer · 2012-12-14 23:18:26Z

4

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.

edited Dec 14, 2012 at 23:18

answered Dec 14, 2012 at 23:12

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ttothec Over a year ago

Sorry about that.. I was put on this project at work and I'm desperately trying to solve these issues given the tight timeframe... so most of my "coding" comes from pasting bits and pieces from tuts and other documentation sites I see online... In regards to your answer given this fiddle: jsfiddle.net/wH2qF/1 could you indicate where I need to make the necessary changes to have this function properly on click? greatly appreciated!

I Hate Lazy Over a year ago

@ttothec: On the left side of the jsFiddle page, there's a menu where MooTools 1.4.5 is currently chosen. Click that menu, and choose jQuery 1.8.2 instead. (And of course, click Run at the top.)

ttothec Over a year ago

Oh... that sure made it work in the jsFiddle page... I wonder why it doesn't work on my code then...

I Hate Lazy Over a year ago

@ttothec: Did you import the jQuery library? <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Sushanth -- · Accepted Answer · 2012-12-14 23:16:27Z

1

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

answered Dec 14, 2012 at 23:16

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

function inside another function doesn't work

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related