Please bear with me. I have returned to college for a second career and HTML & JavaScript are new to me. I am trying to complete a simple assignment where I accept user input `numShares` & `numYears` via HTML. I'm trying to use JavaScript to fill in a 3 column table (`Year`, `Start Amount`, and `End Amount`). The only calculation on the user input is to double the `numShares` each year. **Question/Problem:** As it is, I receive no output (or error messages). Any and all guidance is appreciated.

Sample Output:  

[![sample table](https://i.stack.imgur.com/OkClR.png)](https://i.stack.imgur.com/OkClR.png)

Below is the HTML & JS I have so far:

```js
var amt = document.getElementById("qty").value;
var numYears = document.getElementById("years").value; 
var totalAmt, newE1, newE2, newE3, newText;

elTable = document.getElementById('profits');  // get table

function total() {
 for (var i = 0; i < numYears; i++) {

  totalAmt += amt;

  newE1 = document.createElement('td');
  newText = document.createTextNode(i);
  newEl.appendChild(newText);
  elTable.appendChild(newE1);

  newE2 = document.createElement('td');
  newText = document.createTextNode(amt);
  newEl.appendChild(newText);
  elTable.appendChild(newE2);

  newE3 = document.createElement('td');
  newText = document.createTextNode(totalAmt);
  newEl.appendChild(newText);
  elTable.appendChild(newE3);

 }
}

elAddRow = document.getElementById('total');  // get calculate button
elAddRow.addEventListener('click', function() {
    total();
})
```

```html
<form method="post" action="" name="invest">
  <h2></h2>

  <br>Enter Number of Shares:
  <input type="text" id="qty">
  <br>Enter Years to Invest:
  <input type="text" id="years">
  <br/>
  <br>
  <input type="button" value="Calculate Return" id="total">
  <br>
  <br>
  <br>

</form>

<table id="profits">
  <thead>
    <tr>
      <th>Year</th>
      <th>Start Amount</th>
      <th>End Amount</th>
    </tr>
  </thead>
  <tbody>

  </tbody>

</table>
<script src="scripts/profits.js"></script>

</html>
```