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 --: Why do you have nested functions??
• Dave Newton: @Sushanth-- My guess would be scoping, or accident. Functions are nested all the time, although sometimes it isn't as obvious as this.
• ttothec: 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)
• Sushanth --: @DaveNewton .. yup that's right.. But i do not see a see a reason to nest the functions in the OP's scenario

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.

• ttothec: 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: @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: Oh... that sure made it work in the jsFiddle page... I wonder why it doesn't work on my code then...
• I Hate Lazy: @ttothec: Did you import the jQuery library? <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Answer 2

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