Intro.js not able to fire function between two ste

Question

I am absolute begginer with JS, Please check my code, I am not able to call a function between two steps of intro.js. For now I am just trying to show alert but failed.

<script type="text/javascript">
var introguide = introJs();
$(function(){



introguide.setOptions({
steps: [
{
  element: '#chaman',
  intro: 'This is step1',
  position: 'top',
  onchange: function(){
    //do something interesting here...

    alert("Want to call function after this step , no alert showing ");
  },
  onbeforechange: function(){

  }
},
{
  element: '#search',
  intro: 'This is step 2.',
  position: 'bottom',
  onchange: function(){
    //do something interesting here...


  },
  onbeforechange: function(){

  }

}
,
{
  element: '.flyMarker',
  intro: 'This is step 3.',
  position: 'bottom',
  onchange: function(){
    //do something interesting here...
  },
  onbeforechange: function(){
    //do something else interesting here...
  }
}
]
});



setTimeout(function() { introguide.start(); }, 3000);


});


createStepEvents: function( guideObject, eventList ){

//underscore loop used here, foreach would work just as well
_.each( eventList, function( event ){

//for the guid object's <event> attribute...
guideObject[event]( function(){

  //get its steps and current step value
  var steps       = this._options.steps,
      currentStep = this._currentStep;

  //if it's a function, execute the specified <event> type
  if( _.isFunction(steps[currentStep][event]) ){
    steps[currentStep][event]();
  }
});

}, this );
}

//setup the events per step you care about for this guide
createStepEvents( introguide, ['onchange','onbeforechange']);



</script>

I want to fire some function after each step.

Answer 1

Don't forget to add underscore.js.

The mistake on your code is:

createStepEvents: function( guideObject, eventList ){

Change to:

function createStepEvents(guideObject, eventList) {

var introguide = introJs();
$(function() {

  introguide.setOptions({
    steps: [{
        element: '#chaman',
        intro: 'This is step1',
        position: 'top',
        onchange: function() {
          alert("Do whatever you want on this callback.");
        },
        onbeforechange: function() {
        }
      },
      {
        element: '#search',
        intro: 'This is step 2.',
        position: 'bottom',
        onchange: function() {
        },
        onbeforechange: function() {
        }
      },
      {
        element: '.flyMarker',
        intro: 'This is step 3.',
        position: 'bottom',
        onchange: function() {
        },
        onbeforechange: function() {
        }
      }
    ]
  });

  setTimeout(function() {
    introguide.start();
  }, 3000);

});

function createStepEvents(guideObject, eventList) {

  //underscore loop used here.
  _.each(eventList, function(event) {

    //for the guid object's <event> attribute.
    guideObject[event](function() {

      //get its steps and current step value
      var steps = this._options.steps,
        currentStep = this._currentStep;

      //if it's a function, execute the specified <event> type
      if (_.isFunction(steps[currentStep][event])) {
        steps[currentStep][event]();
      }
    });

  }, this);
}

//setup the events per step you care about for this guide
createStepEvents(introguide, ['onchange', 'onbeforechange']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.4.0/intro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>