Click a button programmatically - JS

Question

I ve seen this done in other webapps  but I m fairly new to Javascript and can t really figure this out on my own  I want to create a Google Hangout programmatically  However  in the official API the only way you can create a Hangout is by including the Hangout button on your page   Here s the Google doc on the Hangouts button   What I want to do is have a user click an img of another user and open the Hangout this way  It seems like I could capture that click and then  click  the Hangouts button in the background  However  I m not very good with Javascript so I wouldn t know how to achieve this   EDIT  I tried mohamedrais  solution below with no luck  Is it something to do with the class of the button   Here s the code for the button  taken from the Hangouts docs with an added id     lt script type  text javascript  src  https   apis google com js platform js  gt  lt  script gt           lt div class  g-hangout  id  hangout-giLkojRpuK                                  data-render  createhangout  gt           lt  div gt    Here s the JS I added  rendered with ids         lt script gt            window onload   function                    var userImage   document getElementById  img-giLkojRpuK                  var hangoutButton   document getElementById  hangout-giLkojRpuK                   userImage onclick   function                      console log  in onclick                    hangoutButton click       this will trigger the click event                                        lt  script gt    When I click the img   in onclick  is getting logged  so the function is getting called  However  nothing happens - Hangouts isn t launched    When I do click directly on the Hangouts button it does launch Hangouts  However  I want to eventually hide this and perform the click from the image   Here s a picture of the Hangouts button above the img

User · Answer

When using JavaScript to access an HTML element, there is a good chance that the element is not on the page and therefore not in the dom as far as JavaScript is concerned, when the code to access that element runs.

This problem can occur even though you can visually see the HTML element in the browser window or have the code set to be called in the onload method.

I ran into this problem after writing code to repopulate specific div elements on a page after retrieving the cookies.

What is apparently happening is that even though the HTML has loaded and is outputted by the browser, the JavaScript code is running before the page has completed loading.

The solution to this problem which just may be a JavaScript bug, is to place the code you want to run within a timer that delays the code run by 400 milliseconds or so. You will need to test it to determine how quick you can run the code.

I also made a point to test for the element before attempting to assign values to it.

window.setTimeout(function() { if( document.getElementById("book") ) { // Code goes here }, 400 /* but after 400 ms */);

This may or may not help you solve your problem, but keep this in mind and understand that browsers do not always function as expected.

User · Answer

Though this question is rather old  here s a answer     What you are asking for can be achieved by using jQuery s  click   event method and  on   event method  So this could be the code      Set the global variables var userImage       img-giLkojRpuK    var hangoutButton       hangout-giLkojRpuK       document  ready function            When the document is ready loaded  execute function         Hide hangoutButton     hangoutButton hide            Assign  click -event-method to userImage     userImage on  click   function             console log  in onclick            hangoutButton click

User · Answer

The other answers here rely on the user making an initial click  on the image   This is fine for the specifics of the OP detail but not necessarily the question title   There is an answer here explaining how to do it by firing a click event on the button   or any element

User · Answer

I have never developed with HangOut  I ran into the same problems with FB-login and I was trying so hard to get it to click programatically  Then later I discovered that the sdk won t allow you to programatically click the button because of some security reasons  The user has to physically click on the button  This also happens with async asp fileupload button  So please check if HangOut does allow you to programatically click a buttton  All above codes are correct and they should work  If you dig deep enough you will see that my answer is the right answer for your situation you

User · Answer

window onload   function         var userImage   document getElementById  imageOtherUser        var hangoutButton   document getElementById  hangoutButtonId        userImage onclick   function            hangoutButton click       this will trigger the click event             this will do the trick

[javascript] Click a button programmatically - JS

Examples related to javascript