Javascript: Add a class?

[donalall]

Hi

How do i add a class to a text entry box using Javascript ?

And also how do i console.log it to check that's it's done ?

I want to add another class (class2) to existing one (class1).

End result:        class = "class 1" "class2"

JS code i've used:

  document.getElementById("teb_1").className = "MyClass";

  console.log(document.getElementsById("teb_1").getAttribute("class"));

I've also tried "teb_1c" and "teb_1_inputField".

The console error I'm getting is "Cannot set property 'className' of null".

The text entry box is named "teb_1" in Properties panel.

Javascript code is in an external file.

CPM.js has id: 'teb_1',

I'm using Captivate 9, HTML5 output.

Regards

Donal.

[donalall]

UPDATE:

Javascript works if i put it in the script window of a Slide's "On Enter".

But does not when i put it in the Index file.

Error code = Uncaught TypeError: Cannot set property 'className' of null

FYI: console.log code should say "...getElementById...." not "Elements".

[TLCMediaDesign · Accepted solution]

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.

[donalall]

Thanks TLC - I realised my mistake about the replacing the class, and i knew i had to have some basic code in there but didn't know what.

If i am using function calls in JS Script windows then i don't need to subscribe to Captivate events, so the external JS file would just consist of Functions ? or do i need to check if the module / interface is ready?

Why is it necessary to create a function to use jQuery?

I have another question about the INTERACTIVEITEMSUBMIT event but i'll create a new question for that.

[TLCMediaDesign]

If all you are doing is creating functions, then no, you do not need the Captivate event listeners.

You don't need a function to use jQuery, I was saying create a function or use jQuery. Since jQuery statements are much smaller, there is less of a chance that any script in the JS Window would be escaped incorrectly when converted to a string.

[donalall]

Thanks again. I'll be first in the the queue for your course, ...book .... seminar .....on CP and JS