Can't get driver to execute from a button click

[lavafactory]

I'm sure I'm doing something wrong here. Driver seems to work fine if it's included inline in a page. For example

const driver = new Driver();

  driver.highlight({
  element: '#title',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    }
  });

However if I wrap it in a function and try to call it from a click like this, it fails:

function startTutorial()
{
  const driver = new Driver();

  driver.highlight({
  element: '#title',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    }
  });
}

Essentially the screen dims like it's going to popover, then goes back to normal without showing the pop.

[kamranahmedse]

You need to add e.stopPropagation() on the button click that triggers the driver.

[lavafactory]

Thank you for this. I saw that line all the way at the end of the doc

Note – Do not forget to add e.stopPropagation() to the click binding that triggers driver

But I'm no expert in javascript, and this wasn't obvious to me. Here's an example I used, and it may be helpful for others in the future:

Button:
<a class="btn btn-success" href="javascript:void(0);" id="tutorial">Tutorial</a>

Event Code

document.querySelector("#tutorial").addEventListener('click',
  function(e){
    const driver = new Driver();

    driver.highlight({
    element: '#title',
    popover: {
      title: 'Title for the Popover',
      description: 'Description for it',
      }
    });
    e.stopPropagation();
    
  })

Hope this helps someone else.

[kamranahmedse]

@lavafactory you need to put e.stopPropagation() at the top of the event body

document.querySelector("#tutorial").addEventListener('click', function(e){
    e.stopPropagation();

    const driver = new Driver();

    driver.highlight({
        element: '#title',
        popover: {
          title: 'Title for the Popover',
          description: 'Description for it',
        }
     });    
  })