7

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
wong2
  • 34,358
  • 48
  • 134
  • 179
  • What's `$`? Prolly, you use it wrong. I doubt Google would have persistent IDs on interface elements, anyway. – katspaugh Jul 02 '11 at 16:49
  • They are probably already using jquery to enable it. I would try looking at the element in Chrome dev tools, I believe that shows the code as finished. May help. (I'd love to look but don't have Google+ yet) – Drazisil Jul 02 '11 at 16:52
  • @katspaugh I think Google defined it: $ bound: function () { return document.getElementById.apply(document, arguments) } – wong2 Jul 02 '11 at 16:53
  • @Drazisil This is what the code $(":1vq.post") show:
    ​Post comment​
    ​     – wong2 Jul 02 '11 at 16:54
  • There's probably a block of code that applies things to divs based on 'role' then, I would look for that. – Drazisil Jul 02 '11 at 16:56

3 Answers3

4

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • If you can point me to where you got that code from Google, I'll take a look. I can't find any code from Google that looks like that and neither can the Google search engine. – jfriend00 Jul 03 '11 at 06:29
  • I've said that it's from **Google+** 's post-comment button – wong2 Jul 03 '11 at 08:19
  • And I can't find that on their site. If you post a link to it, I'll figure out why your stuff isn't working. If you don't want to point me to it, I won't be able to help any further. It's illegal HTML/CSS and I don't believe Google is recommending it directly so there is likely some miscommunication somewhere. If you want me to help sort that out, please point me to where you got it from. – jfriend00 Jul 03 '11 at 08:24
  • Maybe I'm dense, but I don't find the code you posted anywhere on the page http://plus.google.com and I don't see an "index" page that you refer to. A direct link to the page would get me there right away. The plus-one code I do find is here: http://www.google.com/webmasters/+1/button/ and it doesn't look like yours at all. – jfriend00 Jul 03 '11 at 10:39
  • @jfriend00 let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1098/discussion-between-wong2-and-jfriend00) – wong2 Jul 03 '11 at 10:43
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.

katspaugh
  • 17,449
  • 11
  • 66
  • 103
  • Then how could I click it with JavaScript? I noticed that the extension **Vimium** could do that. – wong2 Jul 02 '11 at 17:02
  • @wong2, install Firefox and Firebug, on the "Script" tab press "Break on next" and click on the button in question. – katspaugh Jul 02 '11 at 17:15
  • 1
    They actually are using `addEventListener`. The questions is, can you trigger a listener? – Drazisil Jul 09 '11 at 15:42
  • Yes, you can -- via `createEvent`/`dispatchEvent`, someone must have already mentioned that. – katspaugh Jul 09 '11 at 18:48
0

Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).

hugomg
  • 68,213
  • 24
  • 160
  • 246