Javascript to trigger multiple elements in Storyline

Although Jurgens sample is perfect i shortly want to point the difference between 'querySelectorAll' and 'querySelector' out to you. As you used querySelectorAll you get a list with multiple elements and thus your code as is didnot work. If you used querySelector instead it works fine though. Nevertheless is Jurgens solution better as it loops over all the items in the list. But its always good to be aware of why something does or doesnot work.

Hi Math

Your ways are always creative! Thanks for sharing.

On a slight tangent, once you've found the DOM elements you want to work with in javascript, do you know a way to CLICK them from inside the javascript? I.e., if you want to simulate a user clicking them.

Using a click() event or dispatchEvent doesn't seem to work.

In particular, I've tried to programatically  'click' a Storyline marker object, but can't make it happen.

I'd really appreciate any insight, experience or thoughts you've had with something like this.

PeteB

Calling a function directly should work fine. Offcourse Storyline elements might be difficult to trigger. Maybe share a sample and i check it.

I am trying to get an element to have a listener, and I used most of your code, but missing something. Can you diagnosis this.

var TopButton = document.querySelectorAll("[data-acc-text='ImmEnroll']");
var player = GetPlayer();


TopButton.addEventListener("mouseup", MouseUpHandler);


function MouseUpHandler(e)
{
 var e = window.event || e;
 alert("Mouse");
}

I have the ImmEnroll as my Accessibility title on the element.

with

document.querySelectorAll

you get a list (array) of results, but this function

TopButton.addEventListener

don't work with lists, only for a single result

here is a version, which works for one and multiple search results

var player = GetPlayer();
var TopButtons = document.querySelectorAll("[data-acc-text='ImmEnroll']");

TopButtons.forEach( item => {
  item.addEventListener('mouseup', MouseUpHandler )
});
  
function MouseUpHandler( event ) {
  console.log( event );
  alert("Mouse");
}

https://360.articulate.com/review/content/de746630-26bb-4f04-9e5f-aa6c2dd4eba0/review

Another follow up question, is there a way to use "this" as in place of the actual variable name in the gsap function? Just so I could refer to the function without having to use the name of the variable, this way I can reused the code, (see example below).

var player = GetPlayer();
var TopButtons = document.querySelectorAll("[data-acc-text='ImmEnroll']");

var TranButton =document.querySelectorAll("[data-acc-text='Transport']");

TranButton.forEach( item => {
item.addEventListener('mouseup', MouseUpHandler )
});

TopButtons.forEach( item => {
item.addEventListener('mouseup', MouseUpHandler )
});

function MouseUpHandler( event ) {
   gsap.to(this, {duration:.5, alpha:.5})
}

Just try it... and it works