Javascript click() doesn't work on some elements

Question

I want to write some automation to website. Simply filling in forms and simulating clicks on elements. But for some elements JavaScript function click() doesn't work. For example it is on this page: http://www1.plus.pl/bsm/ If I do click() on "Wyślij" button, nothing happens. It is my command:

document.getElementsByClassName('tab-button')[0].click()

What is wrong? Why on other elements this function works?

Garrettgarrick

on some browsers [0] might not work if it's not an array. – Prerequisite

Gumik - please post your solution as an answer, rather than editing it into the question – Ellis

Answer 1

With yours help I found the solution:

var evt = document.createEvent('MouseEvents')
evt.initMouseEvent('mousedown', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.querySelectorAll('.tab-button')[0].dispatchEvent(evt)

Notice that it should be mousedown event rather than click. Some sites are done in a different way than others. Another important thing is 3rd parameter. It should be set to false (in this particular case). It sets cancelable value. Without this set to false it doesn't work.

Thank you for all answers!

Garrettgarrick

Not working for me. I had Similar question #77470802 – Beal

Answer 2

document.getElementsByClassName('tab-button')[0].dispatchEvent(event)

or

document.getElementsByClassName('tab-button')[0].fireEvent(event)

is the way you could do it... but trying it on the site, the 'click' event isn't bound to that element

EDITED See How to trigger event in JavaScript?

Overline

It gives the following errors: Unhandled InternalException: WRONG_ARGUMENTS_ERR; fireEvent' is not a function. This element has no 'click' event, so why something happens if i click on it with mouse? Is it some different way? – Garrettgarrick

Some browsers support fireEvent, some dispatchEvent. You should do a if(...dispatchEvent) { ...dispatchEvent('click') } first (and the same for .fireEvent. Maybe the event bound isn't click. Maybe it's mousedown? – Overline

You are right. It is mousedown event. But it is more complicated than you wrote. This code works well: var evt = document.createEvent('MouseEvents'); evt.initMouseEvent('mousedown', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getElementsByClassName('tab-button')[0].dispatchEvent(evt); – Garrettgarrick

Yes. Thank you for your valuable comment. I updated the question with solution. – Garrettgarrick

It's worth noting that (at least in some) versions of IE, dispatch event doesn't exist - you need to use fireEvent - #2491325 – Overline

Answer 3

I would suspect that it is because the browser you are testing on has no native support for .getElementsByClassName. Try using document.querySelectorAll instead, or assign your element an ID and use document.getElementById. E.g.:

var btn = document.querySelectorAll("tab-button")[0];
btn.click();

Provide

I'm 100% sure that I get proper element. I've tested it on 3 different web browsers: Firefox, Opera, QtWebKit. – Garrettgarrick

Answer 4

are you doing this after Loaded on the body tag, if some elements don't click it may be due to them not being loaded into the DOM when the script runs.

Prerequisite

This object I search for is loaded. I can get some info from this object but click() doesn't work. – Garrettgarrick

you are firing a click event and not binding an event am i right? – Prerequisite

Anyone find something? – Photocell

Answer 5

It seems like some elements need dispatchEvent(), and others need a plain click(). To build on gumik's answer (thanks!), here's my copy-pasta for quick-and-dirty Javascript automation that just needs to click things:

function click(node) {
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('mousedown', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  node.dispatchEvent(evt);
  
  node.click();
}

Usage:

var button = document.querySelector(".somecssclassname");
click(button);

Ingle