title: Click a button programmatically - JS
body: <p>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.</p>
  
  <p><a href="https://developers.google.com/+/hangouts/button">Here's the Google doc on the Hangouts button.</a></p>
  
  <p>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.</p>
  
  <p>EDIT</p>
  
  <p>I tried mohamedrais' solution below with no luck. Is it something to do with the class of the button?</p>
  
  <p>Here's the code for the button, taken from the Hangouts docs with an added <code>id</code>:</p>
  
  <pre><code> &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;
  </code></pre>
  
  <p>Here's the JS I added, rendered with <code>id</code>s:</p>
  
  <pre><code>     &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;
  </code></pre>
  
  <p>When I click the <code>img</code>, "in onclick" is getting logged, so the function is getting called. However, nothing happens - Hangouts isn't launched. </p>
  
  <p>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.</p>
  
  <p>Here's a picture of the Hangouts button above the <code>img</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/j2LgE.png" alt="enter image description here"></p>