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?

5
  • What's $? Prolly, you use it wrong. I doubt Google would have persistent IDs on interface elements, anyway. Commented Jul 2, 2011 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) Commented Jul 2, 2011 at 16:52
  • @katspaugh I think Google defined it: $ bound: function () { return document.getElementById.apply(document, arguments) } Commented Jul 2, 2011 at 16:53
  • @Drazisil This is what the code $(":1vq.post") show: <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>​ Commented Jul 2, 2011 at 16:54
  • There's probably a block of code that applies things to divs based on 'role' then, I would look for that. Commented Jul 2, 2011 at 16:56

3 Answers 3

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.

Sign up to request clarification or add additional context in comments.

5 Comments

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.
I've said that it's from Google+ 's post-comment button
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.
Maybe I'm dense, but I don't find the code you posted anywhere on the page 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: google.com/webmasters/+1/button and it doesn't look like yours at all.
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.

4 Comments

Then how could I click it with JavaScript? I noticed that the extension Vimium could do that.
@wong2, install Firefox and Firebug, on the "Script" tab press "Break on next" and click on the button in question.
They actually are using addEventListener. The questions is, can you trigger a listener?
Yes, you can -- via createEvent/dispatchEvent, someone must have already mentioned that.
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).

3 Comments

No, it's not JQuery, it seems that Google defines $ as function () { return document.getElementById.apply(document, arguments) }
Then perhaps using the full JQuery(...) instead of $(...) should be enough?
It seems Google+ didn't use JQuery

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.