title: Javascript: click on element instead of button
body: <p>I have simple code where is 4 containers with buttons. Now I tried to make whole element clickable to redirect to site specific to the container.</p>
  <p>One element like I have in example working fine but when I add more than one, others will not work.</p>
  <p>There is facebook, youtube, google, and twitter container and each of them have specific link to redirect.</p>
  <p>So I need to make more than one element correctly clickable not only on a button but on whole element.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var el = document.getElementById("container");
  
  if (el.addEventListener) {
    el.addEventListener("click", function() {
      document.getElementById("button").click();
    }, false);
  } else {
    el.attachEvent("onclick", function() {
      document.getElementById("button").click();
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    background: coral;
    padding: 32px;
    margin: 16px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  
    &lt;a id="button" href="https://google.sk/"&gt;Google&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
    &lt;a id="button" href="https://youtube.com/"&gt;Youtube&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
    &lt;a id="button" href="https://facebook.com/"&gt;Facebook&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
    &lt;a id="button" href="https://twitter.com/"&gt;Twitter&lt;/a&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>