JavaScript .click on DIV not working, why?

Question

I'm doing an app using JavaScript to collect contacts from Google Contacts. What I need to do is navigate to this site, click on a DIV and extract the HTML source.

Problem is, when I manually click on the DIV, the website has the expected behaviour. But when I call click on the same DIV programatically, nothing happens.

Here is the DIV in question :

<div id=":se" class="tk3N6e-LgbsSe VIpgJd-TzA9Ye-eEGnhe Ycq2Ve tk3N6e-LgbsSe-roVxwc tk3N6e-LgbsSe-n2to0e tk3N6e-LgbsSe-vhaaFf-LK5yu ipG21e" role="button" tabindex="0" data-tooltip="Next" aria-label="Next" style="user-select: none;">
<span class="Fj0vqf" aria-hidden="true">&nbsp;</span>
<img class="P1rG1b tk3N6e-LgbsSe-RJLb9c" src="images/cleardot.gif" alt="">
</div>

To achieve the task, I'm using this JS :

document.getElementsByClassName('tk3N6e-LgbsSe')[7].click();

Although the selector above return the correct node, when I call .click(), nothing happens. What am I missing here?

Below is the site image with the DIV in question highlighted:

where do you have defined your `click` event? can you provide an example? — N. Ivanov, Apr 10 '18 at 12:40
It's not my event, it's the event on Google Contacts : https://www.google.com/contacts/u/0/?cplus=0#contacts — delphirules, Apr 10 '18 at 12:42

sabithpocker · Accepted Answer · 2018-04-10T13:11:37.123

10

The following worked for me, had to do a mouseup after a mousedown.

document.getElementsByClassName('tk3N6e-LgbsSe')[7].dispatchEvent(new MouseEvent('mousedown'))
document.getElementsByClassName('tk3N6e-LgbsSe')[7].dispatchEvent(new MouseEvent('mouseup'))

edited Apr 10 '18 at 13:11

answered Apr 10 '18 at 13:05

sabithpocker

15,274
1
42
75

Well, this is @epascarello s answer and 50+ contacts to play with! Glad that your problem is solved – sabithpocker Apr 10 '18 at 13:47
1

Thank you. Your code just ended a 2 day search.... – John Muggins Sep 24 '21 at 20:01

epascarello · Answer 2 · 2018-04-10T12:51:08.000

3

The click is bound to the TR element.

document.querySelectorAll("tr.K9ln3e")[4].click()

And than I saw that it is not the person you are clicking on, but the arrow. Funny thing is I do not have enough contacts in gmail to have the arrow so I can only assume this will work

var dv = document.getElementsByClassName('tk3N6e-LgbsSe')[7]
var clickEvent = new MouseEvent('mousedown', {
  view: window,
  bubbles: true,
  cancelable: true
});
dv.dispatchEvent(clickEvent);

edited Apr 10 '18 at 12:51

answered Apr 10 '18 at 12:44

epascarello

204,599
20
195
236

Thanks but this command would click in a contact, not on the 'Next' div ; please see the image in the question – delphirules Apr 10 '18 at 12:47
I realized that when I went and swapped out your class to see what you were selecting. Looks like it is a mousedown and not a click bound to it when you inspect the element in the event listeners in chrome. – epascarello Apr 10 '18 at 12:52
Is there a way to call a mousedown event via JS ? – delphirules Apr 10 '18 at 12:54
Maybe the listener is not attached to the DIV ? – delphirules Apr 10 '18 at 12:59
If you have more than 50, try changing items per page in settings. – sabithpocker Apr 10 '18 at 13:00
@sabithpocker That would be a solution, but i'm trying to understand why the JS method won't work – delphirules Apr 10 '18 at 13:05
@delphirules That suggestion was for epascarello as he mentioned he doesn't have enough contacts to check it. – sabithpocker Apr 10 '18 at 13:07
@sabithpocker Ah, ok understood ;) – delphirules Apr 10 '18 at 13:09

JavaScript .click on DIV not working, why?

2 Answers2