1

I've tried the steps here: Step with click functionality in intro.js

to get a function triggered during a step. I haven't had success with getting the function to execute, but the tutorial still runs. Ultimate goal is to have the function trigger a button click. Thanks for any help. 

<script type="text/javascript">
  function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            intro: "Welcome to the page!",
            onchange: function(){
                console.log("test");
            },
            onbeforechange: function() {
                console.log("before");
            }
          },
          {
            element: '#step1',
            intro: "You can start doing something by clicking the New Item button."
          },
          {
            element: '.thefilter',
            intro: "You can filter any of the stock items in the table by using the search fields ",
            position: 'bottom'
          }
        ]
      });
      intro.start();
  }
</script>

<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>
coreyg
  • 368
  • 4
  • 18
  • 1
    Hi. Have you looked here: https://introjs.com/docs/intro/api/ ? – Chris Dec 21 '18 at 22:38
  • Hi Chris, yeah I originally started there, but since I'm using the consolidated json steps, I started leveraging stackoverflow to get the syntax down. I feel like I have it right though, but they aren't firing. – coreyg Dec 21 '18 at 22:48
  • @Chris I just dug into the examples a bit more and got better direction. Posted answer below. – coreyg Dec 21 '18 at 23:00
  • Well done @coreyg! – Chris Dec 22 '18 at 14:07

1 Answers1

4

I missed something in the examples that gave me the direction I needed.

Here is the updated code.

TLDR; removed the inline onchange in the steps and appended it before the intro.start. Works!

<script type="text/javascript">
  function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            intro: "Welcome to the page!"
          },
          {
            element: '#step1',
            intro: "You can start doing something by clicking the New Item button."
          },
          {
            element: '.thefilter',
            intro: "You can filter any of the stock items in the table by using the search fields ",
            position: 'bottom'
          }
        ]
      });
       intro.onbeforechange(function () {
      if (this._currentStep === 2) {
        console.log('what is happening')
        return false;
      }
    });
      intro.start();
  }
</script>

<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>
coreyg
  • 368
  • 4
  • 18