Click a button made from div with JavaScript?

javascript dom-events google-plus

14,305

Solution 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.

Solution 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.

14,305

Author by

wong2

Actively maintaining https://github.com/wong2/pick

Updated on June 11, 2022

Comments

wong2 almost 2 years
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?
- katspaugh almost 13 years
  
  What's $? Prolly, you use it wrong. I doubt Google would have persistent IDs on interface elements, anyway.
- Drazisil almost 13 years
  
  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)
- wong2 almost 13 years
  
  @katspaugh I think Google defined it: $ bound: function () { return document.getElementById.apply(document, arguments) }
- wong2 almost 13 years
  
  @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>
- Drazisil almost 13 years
  
  There's probably a block of code that applies things to divs based on 'role' then, I would look for that.
wong2 almost 13 years

Then how could I click it with JavaScript? I noticed that the extension Vimium could do that.
wong2 almost 13 years

No, it's not JQuery, it seems that Google defines $ as function () { return document.getElementById.apply(document, arguments) }
Rohan Desai almost 13 years

Then perhaps using the full JQuery(...) instead of $(...) should be enough?
wong2 almost 13 years

It seems Google+ didn't use JQuery
katspaugh almost 13 years

@wong2, install Firefox and Firebug, on the "Script" tab press "Break on next" and click on the button in question.
jfriend00 almost 13 years

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.
wong2 almost 13 years

I've said that it's from Google+ 's post-comment button
jfriend00 almost 13 years

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 almost 13 years

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.
wong2 almost 13 years

@jfriend00 let us continue this discussion in chat
Drazisil almost 13 years

They actually are using addEventListener. The questions is, can you trigger a listener?
katspaugh almost 13 years

Yes, you can -- via createEvent/dispatchEvent, someone must have already mentioned that.