rjcode rjcode - 16 days ago 5
Javascript Question

Jquery execute two functions on click

I am trying to execute functions on click, Below is click button on HTML,

Insights.init()
will execute on page load will give me some data from server, now with click on button, i need to pass variable to
month
function to filter data, and with click i want to execute all functions inside
Insights()




var Insights = function() {
var initCheckColor = function(vari) {
console.log(vari);
}
var testFunction = function(vari) {
console.log('test');
}

return {
init: function() {
initCheckColor();
testFunction();
}
};

}();

jQuery(document).ready(function() {
Insights.init();
});

function month(vari) {
console.log("hoo");
return {
init: function() {
initCheckColor(vari);
testFunction();
}
};

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="month('test')"> Month </a>





Now problem is, i can see "hoo" printed on console when i click on link, but i also want to print it with execution of initCheckColor(vari) function, means i want output two times, but i could not output it,

How can i get output two times?

Answer

Problem: Is with this code

function month(vari) {
      console.log("hoo");

      //this block of code
      return {                 
        init: function() {
          initCheckColor(vari);
          testFunction();
        }
      };
      // upto here

    }

When you call the month function you are returning a object with a property named init Note: you are just returning a object and not executing the functions within the property. Also other issue is this property is a function which executes two other function, But those functions are not available in the current scope. As they are equal to Private methods for the Insights object.

Solution: Would be to re initialize the object with data just like how you are doing on page load.

I have fixed your code and added comments in the code where the changes were made.

var Insights = function() {
  var initCheckColor = function(vari) {
    console.log(vari);
  }
  var testFunction = function(vari) {
    console.log('test');
  }

  return {
    init: function(vari) {  // have a input parameter during initialization.
      initCheckColor(vari);
      testFunction();
    }
  };

}();

jQuery(document).ready(function() {
  Insights.init('something'); // I pass in the string "something" now this will be printed by the initCheckColor function.
});

function month(vari) {
  console.log("hoo");
  Insights.init(vari); // initialize the Insights object by passing in some value.

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="month('test')"> Month </a>