Click a button made from div with JavaScript?

Question

In Google+, the button that is used to post a comment is made from a div:

<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>  

I think I can click it with:

document.getElementById(":1vq.post").click(); 

But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?

Answer 1

EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.

Earlier attempts to help:

id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.

First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).

If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:

<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>

$("#aPost").click(function() {
    alert("I was clicked.");
});

And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.

Answer 2

click() applies only to elements like input and button.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361

onclick would appear in 1990 and not at Google. They should be using addEventListener.

Try to set a breakpoint and see what function is called on click. Then call the function directly.

---

To trigger a click event handler one can use createEvent plus dispatchEvent.

See example: http://jsfiddle.net/DzVg9/

Note, that Google Plus may actually be using mousedown or mouseup events.