Get total sum without filling all fields or buttons

Question

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>

First of all you're querying by non-existent `id`s (`"id1"` should be `"num1"` etc). Second, once you've retrieved the elements you can't sum them directly, you'll need to access their `.value` attributes. Last you'll need to convert the values to numbers before adding them. — pilchard, Dec 13 '22 at 02:36
Second, you need to use `.value` to get the value of an input. And you should convert the values to numbers before adding them, otherwise it will concatenate them. — Barmar, Dec 13 '22 at 02:37

score 0 · Answer 1 · answered Dec 13 '22 at 02:40

Use .value to get the input values, and convert them to numbers with Number().

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

function add_number() {
  var result = Number(num1.value) + Number(num2.value) + Number(num3.value);
  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>

score 0 · Accepted Answer · answered Dec 13 '22 at 02:56

First, you need to add num1, num2 and num3 inside of add number, so that every time you enter a number this function loads what number you entered.

Second, you need to call the .value of attribute of document.getElementById(). This will return a string with the value of the input text field, but hey, this is a string, you need to convert it to an integer, to be able to add it. so...

Third and last, parse to Int every input and works

   function add_number() {
        var num1 = parseInt(document.getElementById("num1").value);
        var num2 = parseInt(document.getElementById("num2").value);
        var num3 = parseInt(document.getElementById("num3").value);
        var result = num1 + num2 + num3;
        console.log(num1);
        document.getElementById("total").value = result;
      }

Get total sum without filling all fields or buttons

2 Answers2