title: document.getElementById('button').click() working on my pc but not working on another pc
body: <p>I have a <code>DIV</code> when i click on it it will trigger a javascript to click on file upload button which was <code>display:none</code>. It works on my pc with Chrome, Firefox, Chromium. But I wonder why it does not work on my friend pc. </p>
  
  <blockquote>
    <p>Is it because the browser issue or what? Me and my friend using
    different version of Ubuntu. Nothing happen when they click on the DIV</p>
  </blockquote>
  
  <p>Here is my code</p>
  
  <p><code>&lt;div onclick='uploadphoto()' title='Click to edit Profile Picture'&gt;&lt;/div&gt;</code></p>
  
  <pre><code>&lt;form action="js/ajaxuploadprofile.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" style='display:none'&gt;
      &lt;input type="hidden" name="maxSize" value="2000000" /&gt;
      &lt;input type="hidden" name="maxW" value="700" /&gt;
      &lt;input type="hidden" name="fullPath" value="images/profilepic/" /&gt;
      &lt;input type="hidden" name="relPath" value="../images/profilepic/" /&gt;
      &lt;input type="hidden" name="colorR" value="255" /&gt;
      &lt;input type="hidden" name="colorG" value="255" /&gt;
      &lt;input type="hidden" name="colorB" value="255" /&gt;
      &lt;input type="hidden" name="maxH" value="700" /&gt;
      &lt;input type="hidden" name="filename" value="filename" /&gt;
      &lt;input type="file" id='filename' name="filename" onchange="ajaxUpload(this.form,'js/ajaxuploadprofile.php?filename=name&amp;amp;maxSize=2000000&amp;amp;maxW=700&amp;amp;fullPath=images/profilepic/&amp;amp;relPath=../images/profilepic/&amp;amp;colorR=255&amp;amp;colorG=255&amp;amp;colorB=255&amp;amp;maxH=700','upload_area','File Uploading Please Wait...&amp;lt;br /&amp;gt;&amp;lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&amp;gt;','&amp;lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&amp;gt; Error in Upload, check settings and path info in source code.'); return false;" /&gt;
  &lt;/form&gt;
  
  &lt;script type='text/javascript'&gt;
  function uploadphoto()
  {
      el = document.getElementById('filename');
      if (el.onclick) 
      {
         el.onclick();
      } 
      else if (el.click) 
      {
         el.click();
      }
  //$('#filename').click(); // &lt;-- this also works for me but not my friend
  //document.getElementById('filename').click(); // &lt;-- same
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Updated Solution</strong></p>
  
  <p>Recently I found out that <code>style='display:none'</code> will have some issue in some browser (or maybe due to the version of the browser). For my case, the version of Chrome is different between mine and my friends and hence it works on my pc but not my friends' pc. However, I am able to solve this problem by replacing <code>style='display:none'</code> with <code>style='visibility:hidden;height:0px'</code>. the code now is working fine in any pc.</p>
  
  <p><code>visibility:hidden</code> is just hide the view for the content, it will still occupy some space. Hence i added <code>height:0px</code> so that it will have same effect like <code>display:none</code>.</p>