Working with Javascript triggers - how to find button ID's and Classes (States)?

storyline don't use IDs for slide-objects  - only for the default navigation/menu/...

there is a trick to find the element - use the Accessibility / Alt Text

javascript for button 1 (modify with class*):

var myElement = document.querySelector("[data-acc-text='demoText1']");
myElement.classList.add("hidden")

javascript for button 2 (modifiy with style):

var myElement = document.querySelector("[data-acc-text='demoText2']");
myElement.style.backgroundColor = "red";

* "hidden" is one of the storyline used css classes

You might try using a SL variable tied to a trigger that changes the state of the button when true, then use another trigger leveraging javascript to set the variable to true. Watch the order of triggers, as you'll need the button state trigger higher in the trigger order. State changing triggers are pretty powerful. We don't need javascript for everything :)

Hi Brian, and thanks for your reply.

Yes, that is a good tip. However JS triggers can be very powerful and leverage the need to implement a lot of workarounds and hassle with "regular" triggers.

I find it a little peculiar that Articulate allows us to execute code to manipulate objects and elements, yet do not provide us the information to find the object-ID's and classes, for example for different states.

Let's say I want to run the following to solve my issue:

var textEntry = player.GetVar("TextEntry");
var button = player.GetPlayer().GetElementById("ButtonElementID");

if (textEntry === "some-string")
    { button.className = "desired-state-class";

I can't because I cannot find the object-information I need.

storyline don't use html/css for

• text (static text)
• border (around a text)

every static text in storyline is an embeded svg (grafik)

structur of storyline text in the html output

<div> ['demoText1'] - text box background with html styles (1)
  ...
  <svg> - text with textbox border with svg styles (2)
     path -> stroke (corresponds borderColor)
          -> fill   (corresponds backgroundColor)
     text (line 1) -> fill (corresponds color)
     text (line 2) -> fill (corresponds color)
     ...

=> (1) backgroundColor works (but this only works, if there is no background defined in storyline)

=> (2) borderColor and color do not work at all

here are example scripts to modify svg  textColor, borderColor and backgroundColor

// textColor (multiline)

var myText = document.querySelectorAll("[data-acc-text='demoText3'] text");
myText.forEach((x, i) => x.setAttribute("fill", "green" ))

// borderColor
var myElement = document.querySelector("[data-acc-text='demoText3'] path");
myElement.setAttribute("stroke", "blue" )

// backgroundColor (width/height matches with the border)

var myElement = document.querySelector("[data-acc-text='demoText3'] path");
myElement.setAttribute("fill", "red" )

Thank you. What about making something visible again?  I tried using 

myElement.classList.add("visible")

But it doesn't do anything even though I see the css class in your above list.