Add event listener

[bills89323792]

Hi,

I confess I have no idea of how to use event listeners.  I've looked elsewhere on the intenet, but I think the syntax may be Captivate-specific.  I have 20 button that all use the same Javascript code that triggers according to the buton ID clicked.

I'd like not to add this same JS code to all the buttons, because that takes a long time to add every time I modify the code a little. 

Is this a good job for an event listener?

If so, could someone help me with an example that i can paste into the slide enter javascript box?

So the example goal would be something like this, to hide whichever button is clicked:

var butName = this.document.activeElement.getAttribute("id");

cp.hide('butName');

Thank you.

[Lilybiri]

Why not combine a command 'Hide button' with your Javascript code in an advanced action? Since it is about a click, you can trigger it by the Success event of that button. If you turn this into a shared action, you can apply it to all buttons, and only have to change one parameter: the button.

[bills89323792]

The "hide" command is just an example, and my real code is a bit too complex, I guess, to be accepted in Advanced Actions, But it works in the regular Execute Javascript box.

[Lilybiri]

You can combine the script box within an advanced action. Or you could define JS functions in the JS file, and call the function inthe script box within an advanced action. You know I'm a big fan of advanced actions, but I use the script box within advanced actions often.

[bills89323792]

I've just found that the same code that works in the regular (simple action) JS script box gets rejected when I paste it into the Advanced Action JS script box.

[bills89323792]

The 2nd option is intriguing- calling just the JS function from advanced action without needing to include the entire script in the advanced action JS box.  I'd love to see an example as I'm not sure how to do that.

[TLCMediaDesign]

If you named your buttons that share the same JavaScript with a unique identifier, like somebutton_js, you could then loop through everything on a slide and automatically add the event listeners to every object with that identifier all pointing to the same event handler.

Do you need this on every slide?

[bills89323792]

That's what I'm trying to do. There are only 6 slides, so it's also fine for me to copy the event listener over to the different slides.   My current JS code uses the button names to execute an action. So, for example, the buttons on slide 1 are "btn1_1", "btn1_2", etc. and variables are similarly named. The code begins by extracting the number identifiers in the button name.

I've never made an event listener, so an example would be very helpful. I guess I'm hoping I can add this to a JS box inside the slide or on slide entry, rather than to the published content.

Let's say I just want to do something like this:

//extract numbers from button name

var but_name = this.document.activeElement.getAttribute("id");

var n2 = but_name.split('_').pop();

var strip= but_name.replace(/[^0-9\]/g,'');

var n1 = strip.charAt(0);

//hide button and assign variable value

cp.hide('btn'+n1+'_'+n2);

window['var'+n1+'_'+n2] = 'Hello';

[TLCMediaDesign]

I don't think you'll get a regular expression to execute in a JS Window in Captivate.

You can put this code in the Captivate template html file or put it in the head of the published document:

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners()
});

function initializeEventListeners()
{ 
if ( interfaceObj )
{
  if ( eventEmitterObj )
  { 
   eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {       
    for ( var i = 0; i < e.Data.si.length; i++ )
    {
     if ( e.Data.si[ i ].n.indexOf( 'btn' ) )
     {
      document.getElementById( e.Data.si[ i ].n ).addEventListener( 'click', buttonClick, false );
     }
    }
   });
  }
}
}

function buttonClick( e )
{
var str = e.target.id;
var res = str.replace('btn', 'var');
cp.hide( e.target.id )
window[ res ] = 'hello';
}

e.target.id returns the btn name = btn1_1

res would be a variable = var1_1

[bills89323792]

Thanks. I'm still trying to figure out how to work within the html file, something else I need to learn, but this will be helpful. 

[tolgab12395142]

You can check out http://infosemantics.com.au/ and their product CpExtra.

[Lilybiri]

Great widget, I love it! But the OP wants a JS solution, not a cp-solution.

[Andy_K_nz]

If you are only developing for HTML5 then I would also recommend CpExtra's event listener features. I've used it in a project that has 70+ buttons each with different external audio files that need to play when clicked. Depending on the button clicked I use JS to play the associated audio. CpExtra provides methods for you to easily apply your Advanced Actions/JS to multiple buttons based on a prefix or suffix used in the naming of the buttons.  That in conjunction with event listening made this process extremely simple. Of course this a widget so it may not be suitable but I use CpExtra with 'headless loading' which basically means that it not applied like stand Captivate widget. When I publish the project the associated CpExtra JS files are included in the publish files.