Adding a Class

First off, thank you to everyone who pitched in to help find a solution or just ask questions. There were a few things I was doing wrong. First, I wasn't executing the function on each slide that I needed. Like thisguy4xapi said, the elements weren't loaded into the DOM yet. And second, I was incorrectly using id (unique) when I should have been using class to target multiple <li> tags.

So, my solution is as follows (and by all means, there is probably another way I could have achieved this but this is the solution I came to). My CSS for styling the ordered (numbered) lists is:

ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 15px;
}

ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}

ol li::before {
  content: counter(my-awesome-counter);
  color: white;
  font-size: 1rem;
  font-family: Helvetica;
  font-weight: bold;
  position: absolute;
  --size: 28px;
  left: calc(-1 * var(--size) - -17px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #B52625;
  border-radius: 50%;
  text-align: center;
}

ol li.rtllist::before {
  left: calc(-1 * var(--size) - -300px);
}

Secondly, in the CPM.js file, I added class="swap" to each <li> tag I wanted to target (I also removed the numbers and periods for the lists, i.e. 1., 2., 3., etc.). 

Then lastly, I added a conditional action in the on-enter action for the slides that contained the lists I wanted to swap. If my SelectedLanguage variable was X or Y, I executed a jquery line of $('.swap').addClass('rtllist'). This checked for classes of "swap", then added an additional class of "rtllist" to them, in turn styling them based on the CSS above.

You state that this is not used until slide 5, so I guess the question is when the js you have listed is executed do the elements exist in the DOM at that time?  It sounds like not.  I have run into this before, so we have to listen for that element id to be on the DOM and then apply our class.  I am going to use jquery instead of vanilla.js, but if that is your problem this will fix it.

This function will run every second looking for the your element with id of 'swap' to exist, once it does exist it will add the class 'rtllist' and then stop checking- clearInterval()

let intvl = setInterval(){

let checkFor = $('#swap').length;
if (checkFor > -1){
 $('#swap').addClass('rtllist');
clearInterval(intvl);
}

},1000)

Hello,

I'm not sure who marked this response as correct, but this is not the solution to my initial question. When I have a little time (busy at the moment), I will come back and provide my solution here for others that share the same problem. Could a moderator please remove the answer above as correct? Thanks!

hey there,

So to be honest, its been a while since I programmed wtih Actionscript in Flash, which is similar to JS. I have programmed in Captivate too, but its more of drag and drop there without using JS of course.

But I think the code would need to be on the same slide, otherwise I don't think it will see the instance name of the object on slide 5, unless you execute at slide 5. 

and is this code right?  "-    -300px"?

left: calc(-1 * var(--size) - -300px);

best,

mark