Use dynamic target - How to?

[ei02028]

Hi guys,

I'm a completely newbie on github and I wasn't able to find help for my problem/doubt. For that, I apologize.

I'm trying to set the target dynamically because I don't have the final id of the element. For that purpose, I'm using "document.querySelector". But isn't working.

Here is my hopscotch code (forget the portuguese):

var tour = {
id: "AdminChangePasswordAndUsername",
steps: [
{
target: document.querySelector('.admintutorialstep1'),
placement: "left",
title: "1",
content: "1"
},
{
target: document.querySelector('.admintutorialstep2'),
placement: "left",
title: "Seleccione a área de administradores",
content: "Clique no botão da área de administradores"
},
{
target: document.querySelector('.admintutorialstep3'),
placement: "left",
title: "Envie as credenciais",
content: "Clique no link enviar credenciais e, de seguida, confirme o envio das mesmas"
}
]
};

hopscotch.startTour(tour);

If I run the code on chrome, the query selector is able to return something like this:

"

"

Which means that it should work but it doesn't :)

Can anybody help me? Thanks

[k10world]

Did you try target: 'div.admintutorialstep1' without the document.querySelector? That should work. Assuming there is only one div with that class else, it will point to the first or last.

[ei02028]

Perfect! Thanks :)

Maybe this kind of things should be on the documentation or examples.

[gthomas3]

Agreed. Documentation of this would be helpful. I'm using hopscotch with Knockout JS where all data is dynamic, and this technique is needed in order to successfully target the dynamically created divs

[rsanchez-RA]

I agree that this should be part of the documentation. Was struggling with this same issue for some time. Thanks @k10world

[k10world]

my pleasure :-)