title: How to determine the file type of a file using javascript
body: <p>I need help regarding on how to determine a file type using JavaScript. For example in this html.</p>
  
  <pre><code>&lt;div class="indi-download"&gt;
  &lt;div class="pull-left"&gt;
      &lt;h6 class="file-format"&gt;%file_display_name%&lt;/h6&gt;
  &lt;/div&gt;
  &lt;div class="pull-right"&gt;
      &lt;a class="download-link" href="%file_url%"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>on this line of code, </p>
  
  <pre><code>&lt;a class="download-link" href="%file_url%"&gt;Download&lt;/a&gt;
  </code></pre>
  
  <p>the href="%file_url%" will return the file type with the following extensions:example:  .docx or .pdf.</p>
  
  <p>something like this.</p>
  
  <pre><code>&lt;a class="download-link" href="http://mysite.com/download/myfiles/sample.pdf"&gt;Download&lt;/a&gt;
  </code></pre>
  
  <p>my problem is, I need to detect what type of file is that using javascript. And if it is a .pdf, the class class="file-format" will change into class="pdf-file-format" and class="doc-file-format" for .doc. It depends on the file extension.  Any idea on how to do this? what must  be the best trick to do this?</p>
  
  <p>This is my sample output, I just want to change the icon of a file that's why I need to change the class name.</p>
  
  <p><img src="https://i.stack.imgur.com/x0igG.png" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong>
  I did something like this but it doesn't work if there are multiple items on the list. Its only working on the first item. please help me.</p>
  
  <pre><code>&lt;body onload="myFunction()"&gt;
  &lt;div class="indi-download"&gt;
  &lt;div class="pull-left"&gt;
      &lt;h6 class="pdf-file" id="file-display-id"&gt;%file_display_name%&lt;/h6&gt;
  &lt;/div&gt;
  &lt;div class="pull-right"&gt;
      &lt;a class="download-link" id="download_link" href="%file_url%"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function myFunction()
   {
    var url = document.getElementById("download_link").href;
   var ext = url.split('.').pop();
   if(ext=='pdf'){
   var newfileclass = document.getElementById("file-display-id");
   newfileclass.className="pdf-file";
   }
   else if((ext=='docx')){
   var newfileclass = document.getElementById("file-display-id");
   newfileclass.className="pdf-file doc-file";
  }
  else if(ext=='zip'){
  var newfileclass = document.getElementById("file-display-id");
  newfileclass.className="pdf-file zip-file";
  }
  else{
  var newfileclass = document.getElementById("file-display-id");
  newfileclass.className="other-file";
  }
  }
  &lt;/script&gt; 
  &lt;/head&gt;
  </code></pre>