search

LinkedInAttic / hopscotch

A framework to make it easy for developers to add product tours to their pages.
Apache License 2.0
4.19k stars 664 forks source link

How to use document.querySelectorAll within the target #301

Closed hsiddique closed 8 years ago

hsiddique commented 8 years ago

Hi,

I have a webpage that is created dynamically. Part of the html code looks this

`

    ```
    • ```

`

I want to create a step for each toolbar tab and was hoping to use the following ` element: document.querySelectorAll('[class="toolbar-tab"]')[0],

element: document.querySelectorAll('[class="toolbar-tab"]')[1],

element: document.querySelectorAll('[class="toolbar-tab"]')[2],

` but a popup does not appear , There are also some elements, that I want to find using the "title".

what is the correct way where I can use querySelectorAll to specify the correct element that I want to use?

thanks

timlindvall commented 8 years ago

Given the above HTML, document.querySelectorAll('[class="toolbar-tab"]') will only match two elements... the first element isn't a match because of the additional class. Still, I'd expect that at least two bubbles would appear, though they'd point at the wrong elements for their step.

Consider using document.querySelectorAll('.className') instead. Other than that, I don't see a particular issue with the syntax above. I'd also recommend making sure the DOM structure exists on the page before you query for those elements using document.querySelectorAll().

Closing because this doesn't appear to be an issue with the Hopscotch library. If, after the above suggested edit, the library is throwing errors or there's unexpected behavior that appears to be due to Hopscotch, please feel free to add a reply and I'll take a look.