0

I need to trigger a change to the page before a step loads. (Specifically, I need to trigger a menu to open before the next step; the next step will highlight that open menu.) I am using introJS.onbeforechange() to accomplish this, which works well. Inside the event handler, when the correct step is reached, the menu is triggered to open. That step is in the middle of the steps on the page. After the last step, the introduction continues on another page.

On the last step of the page, when I click the right arrow (the "Next" button is hidden), this should start the intro over on a new page. But instead of that, an error is generated:

intro.min.js:10 Uncaught TypeError: Cannot read property 'element' of undefined
at J.E (intro.min.js:10)
at J.L (intro.min.js:10)
at l (intro.min.js:10)

This is caused by the existence of the onbeforechange handler.

This is the code in intro.js where it fails:

if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
  continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
}

The code block inside onbeforechange is never triggered, which means the error is triggered before then. If I remove the onbeforechange handler, there is no such error.

Onbeforechange does not seem to handle hitting the right arrow on the last step and there is no way to detect this to smother the error.

user1821431
  • 63
  • 10

1 Answers1

0

The answer is a bit kludgy. I added an onchange handler and when the step is the last step -- and it's unlikely the user will return to the step that triggered the menu to open -- I have removed the onchange handler using this._introBeforeChangeCallback = undefined:

    intro.onchange(function ()
    {
        // last step 
        if (this._currentStep === 9) 
        {
         this._introBeforeChangeCallback = undefined;
        }
    });

This does mean that if the user goes back to a prior step, the menu will no longer be opened.

user1821431
  • 63
  • 10