title: why my input element which is a div child is unclickable while when i replace this input by a button, the button is clickable
body: <p>I want to create a div element which contains a button and an input element.
  but when the input is in the div the input becomes unclickable</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 video_button = document.createElement("BUTTON");
      var user_area = document.createElement("DIV");
      var inp = document.createElement("INPUT");
      
      function upload_video(e){
          console.log("upload_video function");
          var v = document.createElement("VIDEO");
          inp.onchange = function(e){
       v.src = window.URL.createObjectURL(inp.files[0]);
       v.style.heigth = "1000px";
       v.style.width = "1000px";
       user_area.appendChild(v);
          }
      }
      
      
      function input(e){
          console.log("input function");
          inp.setAttribute("type","file");
          user_area.appendChild(inp);
          inp.addEventListener("click",upload_video)
      }
      
      
      window.onload = function(){
          video_button.innerHTML = "upload a video";
          video_button.addEventListener("click",input);
          user_area.setAttribute("contentEditable","true");
          user_area.style.width = "100px";
          user_area.style.height = "500px";
          document.body.appendChild(user_area);
          user_area.appendChild(video_button);
      }</code></pre>
  </div>
  </div>
  </p>