Access button class in javascript

Question

I have a button class that is placed inside an iframe. Problem is that this button's class has such a long name and I do not understand how to reference it in my script.

<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button"></button>

I am using my javascript to reference this class as:

document.querySelector("iframe").contentWindow.document.querySelector(".PDF-dmzpd5z6ckdkxkn8").click();

The above code does not work. Do I have to provide the complete class name for reference?

I am on right track because I have another button that looks like this:

<button class="PDF-tdsfethgr51stg Next-Button Next-Previous-Button" title="Next" aria-label="Next" type="button"></button>

And I can easily call/reference it via:

document.querySelector("iframe").contentWindow.document.querySelector(".PDF-tdsfethgr51stg").click();

Are you sure the content is already loaded when the script is executed? The iframe might have dynamic elements being added asynchronously. — trincot
– trincot, Commented Feb 7, 2022 at 11:26
Those look like class-names generated by React or some other runtime framework. If you're bypassing that framework and manipulating the DOM directly then you'll likely run into issues. Please tell us where your script is running and if React.js or some other framework (Vue.js?) is being used. — Dai
– Dai, Commented Feb 7, 2022 at 11:28

Suleyman · Accepted Answer · 2022-02-07 11:29:28Z

3

If selecting with class doesn't work, you can try to select with title attribute:

document.querySelector('button[title="SignUp"]');

answered Feb 7, 2022 at 11:29

Suleyman

2622 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roy Over a year ago

Thank you. That actually worked.

Amrit Bera · Accepted Answer · 2022-02-07 12:10:43Z

0

Using Id in button is the best option

Example:

<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button" id="exbtn1"></button>

document.querySelector("iframe").contentWindow.document.querySelector("#exbtn1").click();

Note: It's best option to define the tags in Query Selector (eg. document.querySelector("iframe")[0]). The index starts from 0.

answered Feb 7, 2022 at 12:10

Amrit Bera

1662 silver badges10 bronze badges

1 Comment

Roy Over a year ago

Thank you but I have no control over the HTML elements. I am using javascript injection to trigger it.

Collectives™ on Stack Overflow

Access button class in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related