• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Javascript reference to button that triggered it

Explorer ,
Nov 20, 2018 Nov 20, 2018

Copy link to clipboard

Copied

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.

TOPICS
Advanced

Views

1.6K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , Nov 21, 2018 Nov 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");

Likes

Translate

Translate
Contributor ,
Nov 20, 2018 Nov 20, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 20, 2018 Nov 20, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

'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");

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

Hi Gaanf.

Can you please explain why these lines of code do not work for me?

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

I get these errors in the console when I click on Button1.

this.document is undefined

1:AcroForm:Button1:Annot1:MouseUp:Action1
TypeError: this.document is undefined
1:AcroForm:Button1:Annot1:MouseUp:Action1

I have Acrobat 11 Pro on Win 10.

I've been trying to figure this out for quite some time. I would appreciate any help you can offer.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

A thought...

 

I know this does not directly answer the question but I have often utilized a click box over the top of another shape when I wish to mess with the properties of it. It may seem odd to use a click box when you can simply have the smartShape be a button but as you have learned, buttons can be stubborn. 

 

This allows me to leave my clickable area alone and I can change my states underneath it without breaking things. Your code, then, should still return the name of the click box regardless of the changes to the shape underneath.

 

Hopefully that is useful to think about.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

That's a good thought for later if I still need a different workaround. I managed to find a fix though. I just changed the box so that in the Check state it is using an image fill of the checkmark instead of dropping that image on top of it. This is working fine. only a TINY bit less than idea because the original had the check mark sort of going outside the box as if it were actually done by hand on paper, now it's confined to the borders of the box. But it's VERY acceptable. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

LATEST

Hmmm.....

 

Do you intend to let the learner use Android og IOS? I just now work with a

project that is unstable when I use states. I think there might be some mess with CSS and visibility when I use this.id.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines