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

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

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

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.