If you are going to use JavaScript that is not in a function call you need to subscribe to Captivates events to ensure that the element has been rendered in the DOM. So at the very least you should always start with this structure, which will execute the code on slide enter:
var interfaceObj, eventEmitterObj;
window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});
function initializeEventListeners()
{
if ( interfaceObj )
{
if ( eventEmitterObj )
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
{
//execute code here
});
}
}
}
Still you should create a function to add a class or use jQuery. If you try to add the class in the code above and the element is not on the current slide, it will not work and throw an error. You would still need to determine which slide you are on, and the script is then not dynamic. So create an add class function and call it whenever you need. Pass in the parameters Element, Classname:
myAddClass("teb_1", "MyClass" )
function myAddClass( el, cls )
{
var elem = document.getElementsById( el );
var att = document.createAttribute( 'class' );
att.value = cls;
elem.setAttributeNode( att );
}
Also, with your document.getElementById("teb_1").className = "MyClass";
You are replacing any current class on the TEB, you should use:
document.getElementById("teb_1").className += " MyClass";
Note the space before the class name.
AdChoices