Get total sum without filling all fields or buttons

I have a table with 3 number inputs and I want to sum them, but there is no final output for some reason even though I’ve checked that the function and oninput classes are running.

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");

function add_number() {
  var result = num1 + num2 + num3;
  document.getElementById("total").value = result;
}
<table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <th scope="row">number1</th>
      <td><input type="number" id="num1" name="number1" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number2</th>
      <td><input type="number" id="num2" name="number2" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number3</th>
      <td><input type="number" id="num3" name="number3" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td><input type="number" id="total" name="finaltotal" class="form-control"></td>
    </tr>
</table>