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:

 <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:

Answer 1

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

Answer 2

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