title: How to Count [Combined] line length of multiple files?
body: <p>I'm trying to make a counter to see how many lines of code I'm making for this project I'm working on in total. So what I'm trying to do is make a simple JavaScript file that counts every line in multiple files and adds it up into a total. I need any empty lines to be counted, but then have it be outputted to a separate box in the HTML content.</p>
  
  <p>Here's what the HTML page, or something similar, would be like.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      #div1  {
        display: block;
        background: #444444;
        width: 100%
        height: 100%;
      }
      #div1 .container  {
        align: center;
        overflow: auto;
        width: 75%;
        height: 75%;
        display: block;
        background: #666666;
      }
      #div2  {
        display: block;
        background: #444444;
        width: 100%;
        height: 100%;
      }
      #div2 .container  {
        overflow: auto;
        width: 75%;
        height: 75%;
        display: block;
        background: #666666;
      }
    &lt;/style&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="header"&gt;
      &lt;h2&gt;I Failed &lt;u&gt;391&lt;/u&gt; Times!*&lt;/h2&gt;
      &lt;h6&gt;&lt;i&gt;*Before Giving Up&lt;/i&gt;&lt;/h6&gt;
      &lt;/div&gt;
      &lt;div id="div1" class="div"&gt;
        &lt;div class="container"&gt;
          &lt;p&gt;INSERT TOTAL LINES FROM 3 DIFFERENT FILES COMBINED&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="div2" class="div"&gt;
        &lt;div class="container"&gt;
          &lt;p&gt;INSERT TOTAL USED LINES FROM 3 DIFFERENT FILES COMBINED&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;    
  </code></pre>
  
  <h1>JavaScript</h1>
  
  <pre><code>/*function myWorkingUnNeededFunction()  {;
  var attempts = "381 + Counting";
  var hdr1 = document.createElement("H2");
  var txt1 = document.createTextNode("");
  var i;
  hdr1.appendChild("txt1");
  document.getElementById("header").appendChild("hdr1");
  for(i = 0; i &lt; attempts.length; i++)  
  {
    document.getElementByTagName("h2").innerHTML = "'Failed' + i + 'Times'";
  }
  myWorkingUnNeededFunction();
  }
  */
  function myBrokenCounter1()  {
    /* REALLY, REALLY long code of just failure... trust me, you do NOT want to see... I'll just show what I think could work, but not actually fill in certain parts as I am unaware. */
    var lines;
    var counter;
    var lines = document.getElementByClassName("div");
    if(lines.id = "div1")  {
     document.getElementById("div1").innerHTML = counterWithEmptyLines();
     document.getElementById("div2").innerHTML = counterWithUsedLines();
    }
    }
    /* What I was going for is that there will be two counters; one counting the line length of ALL lines, and one counting the line length of ALL **USED** lines. If the div class has a id of div1, the total counter will go to div1 with empty lines. Otherwise, it will go to div2 with the used &amp; empty lines as well. */
    function counterWithLUsedLines()  {
      /* more fails with no knowledge of how to do it */
    }
    function counterWithLEmptyLines()  {
      /* EVEN more fails with no knowledge of how to do it */
    }
  </code></pre>
  
  <p>I've tried. The HTML doesn't lie; I've literally tried about 390 times before giving up. There should be two seperate files; one script.js file which writes it to the HTML file, and ofc, the counter.html file with the script linked.</p>