title: click one element to trigger another's link
body: <p>I have two element and I want to click one to trigger the others link.</p>
  
  <p>I've tried two ways. Both click functions work as button 1 turns red on click however it's not triggering the link. Any ideas what I'm missing from the below?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
    &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;a class="link" href="http://google.com"&gt;Button 1&lt;/a&gt;
  &lt;div class="clickThis"&gt;i want to click this one&lt;/div&gt;
  
  
  &lt;script&gt;
  
  var clickThis = document.getElementsByClassName('clickThis');
  var link = document.getElementsByClassName('link');
  
  
  $(clickThis).click(function(){
      $(link).css({"color": "red"});
      $(link).trigger('click');
  });
  
  $(document).on('click', clickThis, function(event) { 
  event.preventDefault(); 
      $(link).css({"color": "red"});
      $(link).click();
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>