Intro.js: addStep() doesn't work

[ethaniel]

My code is:

 <a href="" class="joyride_home">hi</a>
    <script>
        introJs().addStep({
            element: document.querySelectorAll(".joyride_home")[0],
            intro: "Ok, wasnt that fun?",
            position: "right"
        });
        introJs().refresh();
        introJs().start();
    </script>

Nothing happens.

[JamesDonnelly]

I'm having this issue as well. It doesn't work through the console on http://introjs.com either.

I've tried using the following code, which should apply to the "Browser compatability" icon on the homepage, but it doesn't:

introJs().addStep({
  element: document.querySelector('fa-globe'),
  intro: "foo",
  position: "right"
});

introJs().start();

I've tried both 2.4.0 and 2.5.0 and the issue happens in both. Older versions do not appear to support addStep.

[vivek12345]

@JamesDonnelly your code needs a minor change.
Instead of
document.querySelector('fa-globe')

It should be
document.querySelector('.fa-globe')

I hope that helps.

[vivek12345]

@ethaniel instead of querySelectorAll, can you try querySelector

[ethaniel]

@JamesDonnelly I think here is the proper way:

intro = introJs();
intro.addStep({
  element: document.querySelector('.fa-globe'),
  intro: "foo",
  position: "right"
});
intro.start();

Documentation is very hard to understand for newcomers.

[vivek12345]

@ethaniel this is also incorrect. document.querySelector will take either an ID identifier or class identifier so I this case it should be
document.querySelector('.fa-globe')

[ethaniel]

@vivek12345 thanks, fixed!