Skip to main content
digitaly
Participating Frequently
November 20, 2018
Answered

Javascript reference to button that triggered it

  • November 20, 2018
  • 4 replies
  • 3645 views

I want to execute javascript when I click a button and I want the script to know which button I clicked. If button a, do this, if button b do something else, etc.

In a webpage I would just use the 'this' keyword to refer to the element that fired the event, but when I try it in Captivate, I get the window object!

Any ideas?

It's a long, boring story why I want to do it this way instead of advanced/shared actions, but suffice it to say, if I can get this working it will be better.

This topic has been closed for replies.
Correct answer Gaanf

'this' seems to work for me to reference the active element, which obviously is the one last clicked:

var buttonID = this.document.activeElement.getAttribute("ID");

4 replies

Participant
April 1, 2021

I know this is an old thread and you're probably not monitoring this anymore...but here goes:

I'm using this trick you've mentioned in order to pull the name of the button I'm clicking. 

I've got a button named "permitConditions_NewState1"
the first time I run my js script, it grabs the name of the button that was clicked and correctly stores the expected value.
It changes the state of the button to "active" and shows the right image on that state. But that new state is the image with a checkmark on it.
When I click the button again, it properly triggers my script, but the name it's pulling from the active object is now "Image_2142" which I'm guessing is the image name instead of the name of my button. I THINK it's pulling the name from the checkmark in the state, but I can't tell. I have no idea how to get it to still pull the correct button name after the state change. 

For clarification: The button is an empty box. The Active state is the same empty box, but with a green checkmark image overlayed on top of it. 
TLCMediaDesign
Inspiring
April 1, 2021

You'll notice that if you add a custom state to a button, the hand cursor also disappears as if it's not a button anymore.

Are you using this JS because you have a lot of button that you want to use the same code?

Participant
April 2, 2021

Yes, I'm using JS because I'm reusing this same action all over the place and with a ton of buttons. I hadn't noticed the hand cursor not working. I'll have to go look for that now!

GaanfCorrect answer
Inspiring
November 21, 2018

'this' seems to work for me to reference the active element, which obviously is the one last clicked:

var buttonID = this.document.activeElement.getAttribute("ID");

digitaly
digitalyAuthor
Participating Frequently
November 21, 2018

Thanks!  A couple of good solutions here but this was exactly what I was looking for. I tried a lot of different things yesterday but didn't come across the activeElement property, which, being part of the HTML DOM and not Captivate-specific you'd think it would have been easier to find. 

thisguy4xapi
Inspiring
November 20, 2018

Ok I have a much easier answer for you.  Your post inspired me to dig around in the window object.  When your event fires trigger this

console.log(window.event.path[0].id);

it will display the name of the captivate button

thisguy4xapi
Inspiring
November 20, 2018

There definitely is a way to use captivate common variables and event emitters as you suggest, but I wonder if how we implement wouldn’t solve it for you.

I just have the button call a javascript function, and pass the button name as an argument into the function for ‘which button’ it is. 

So let me give you an example.

function btnPress(passedValue){

                console.log(‘You pressed button ’ + passedValue);

};

Then from captivate when the button is pressed in script window I just call my function upon press

btnPress(‘btn_a’) – or whatever btn value you wanted to have. 

That way if you want you could call the same function for every button, and just pass which button to determine what the function does.

If you want to do it your way also possible, but much more technical – If you are not familiar with this, it details what you are doing and a bunch more.

window.cpAPIInterface.getEventEmitter(); - I believe is the javascipt that will give you the name of the button of the button attached to the event but not positive.

https://helpx.adobe.com/captivate/using/common-js-interface.html

This is very timely as I am finally writing ‘the killer captivate wrapper’ to intergrate .js and captivate seamlessly (I want it because we use xAPI and an LRS and I want to be able to track literally everything that happens in captivate almost down to the frame)…not that I will actually use that detailed of tracking, but am writing the .js wrapper for all future captivate projects and am extracting every value from both Captivate and Scorm object that I can.

Hope that helps – Please share any discoveries!