[javascript] Click a button programmatically - JS

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:

 <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
        <div class="g-hangout" id="hangout-giLkojRpuK"
                                data-render="createhangout">
        </div>

Here's the JS I added, rendered with ids:

     <script>
          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
              };
          };
        </script>

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:

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

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.

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

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.

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();
    });
});