Chrome Extension: JS DOM button click method is not working

Question

From an extension I need to click a button but click event is not triggered, I tested the following JS DOM methods:

getElementsByClassName('button')[0].click(); // Not working
document.querySelector('button').click(); // Not working

The button is created on React.js, this can be the causes of the failed click event?

Any suggestion?

In both the cases you will get the dom in array. So take the index and then bind click event. `getElementsByClassName('button')[0].click()` for all the buttons you need to a loop — sibabrat swain, May 30 '20 at 21:50
Thank you for response. Can you please share any link regarding your suggested solution? Actually i'm new so i don't know much about bind. Thanks. — Asjad Waseeq, May 30 '20 at 21:52
One thing to clear, I want to click the button of a website whose button created on React.js. Thanks — Asjad Waseeq, May 30 '20 at 21:54
I have seen a post having solution of updating the props/state so it will happen. Is that possible and if then how? Thanks. — Asjad Waseeq, May 30 '20 at 21:57
It probably means your code runs before the button is created. Wait for it using MutationObserver or setTimeout/setInterval. More info: [Is there a JavaScript / jQuery DOM change listener?](https://stackoverflow.com/a/39508954) — wOxxOm, May 31 '20 at 05:51
Click event is not running on website's console. Checkout the download button here https://www.canva.com/design?create&type=TACQ-jGq9fY&category=tACFat6uXco&schema=web-2 — Asjad Waseeq, May 31 '20 at 17:15

sibabrat swain · Answer 1 · 2020-05-30T22:18:46.750

1

If the button has the class button and you want to click it by its class. Then please follow this code.

setTimeout(()=>{
  var buttons = document.getElementsByClassName('button');
  for (let btn of buttons) {
    btn.click();
  }
}, 1000);

I have added setTimeout in case you don't get in react function as the buttons as not been loaded into DOM. you can neglect it if not required.

edited May 30 '20 at 22:18

answered May 30 '20 at 22:01

sibabrat swain

in which button you want to trigger the click operation? please say me that particular button's class name – sibabrat swain May 30 '20 at 22:04
I tried with getElementsByClassName('button')[0].click(); but its not working. – Asjad Waseeq May 30 '20 at 22:05
Do a console.log and check `console.log(document.getElementsByClassName('button'))` – sibabrat swain May 30 '20 at 22:06
That's the whole script `document.getElementsByClassName("_1QoxDw Qkd66A n9zSJA ZTpOuQ FcXOnA GnpDIA zQlusQ uRvRjQ vAm98g fa9inA")[0].click();` – Asjad Waseeq May 30 '20 at 22:07
YES, that's why it is not working. Try to select the button using different selectors. Console.log it and check it then bind the click event. – sibabrat swain May 30 '20 at 22:10
also console.log() in browser console. It might not be loaded into DOM where you re checking so showing undefined. If that is the case then try with setTimeOut() – sibabrat swain May 30 '20 at 22:12
Unfortunately, there are two button and only those two are not showing anything even in console and i'm running console on browser console to see if its working. Thanks – Asjad Waseeq May 30 '20 at 22:14
try using `document.getElementsByTagName('button')` now `console.log(document.getElementsByTagName('button'))` – sibabrat swain May 30 '20 at 22:17
It might be the interaction gap. You might be searching for some other things but the interpretations show something different. Please try with the other solutions. – sibabrat swain May 30 '20 at 22:22

1 Answers1