Concatenate function

Question

The idea behind this to animate section with mousewheel - keyboard and swipe on enter and on exit. Each section has different animation. Everything is wrapp inside a global variable. Here is a bigger sample

 var siteGlobal = (function(){
 init();
 var init = function(){
 bindEvents();
 }
 // then i got my function to bind events
 var bindEvents = function(){
 $(document).on('mousewheel', mouseNav());
 $(document).on('keyup', mouseNav());
 }
 // then i got my function here for capture the event
 var mouseNav = function(){
 // the code here for capturing direction or keyboard
 // and then check next section
 }
 var nextSection = function(){
 // Here we check if there is prev() or next() section
 // if there is do the change on the section
 }
 var switchSection = function(nextsection){
 // Get the current section and remove active class
 // get the next section - add active class
 // get the name of the function with data-name attribute
 // trow the animation 
 var funcEnter = window['section'+ Name + 'Enter'];
 } 
 // Let's pretend section is call Intro 
 var sectionIntroEnter = function(){
 // animation code here
 }
 var sectionIntroExit = function(){
 // animation code here
 }
 }();

So far so good until calling funcEnter() and nothing happen I still stuck to call those function...and sorry guys i'm really not a javascript programmer , i'm on learning process and this way it make it easy for me to read so i would love continue using this way of "coding"...Do someone has a clue ? Thanks

• Bergi: Don't use many variable names. Use an object with properties that you can access programmatically.
• gen_Eric: So, does the code you have not work? What's your question? If all your functions are global, then window['section' + name + 'Enter'] should work, and you can call func1();.
• jeffbkk: No it doesn't work at all. The console didn't throw any error. The mousewheel event is trigger

Answer 1

Your concatenation is right but it'd be better if you didn't create global functions to do this. Instead, place them inside of your own object and access the functions through there.

var sectionFuncs = {
 A: {
 enter: function() {
 console.log('Entering A');
 },
 exit: function() {
 console.log('Exiting A');
 }
 },
 B: {
 enter: function() {
 console.log('Entering B');
 },
 exit: function() {
 console.log('Exiting B');
 }
 }
};
function onClick() {
 var section = this.getAttribute('data-section');
 var functions = sectionFuncs[section];
 functions.enter();
 console.log('In between...');
 functions.exit();
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
 buttons[i].addEventListener('click', onClick);
}

<button data-section="A">A</button>
<button data-section="B">B</button>

Answer 2

You could have an object that holds these functions, keyed by the name:

var enterExitFns = {
 intro: {
 enter: function () {
 // animation code for intro enter
 },
 exit: function () {
 // animation code for intro exit
 }
 },
 details: {
 enter: function () {
 // animation code for details enter
 },
 exit: function () {
 // animation code for details exit
 }
 }
};
var name = activeSection.attr('data-name');
enterExitFns[name].enter();

• jeffbkk: I'm really not a javascript programmer ...I'm on leaning process and i would love to continue using this code i wrote right now and move on later for a better way.. So im gone drop a bigger piece of code so you guys can see exactly how i wrote my stuff
• Matt Mokary: That's fair. At least you know which parts of your code could use improvement :)