CODEWITHSUNDEEP
javascriptjquery
rjcode
rjcode

Reputation: 1349

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?

Upvotes: 1

Views: 82

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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>

Upvotes: 2

Related Questions