Get total sum without filling all fields or buttons-CodePudding

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 >
  <tbody>
    <tr>
      <th scope="row">number1</th>
      <td><input type="number" id="num1" name="number1"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number2</th>
      <td><input type="number" id="num2" name="number2"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number3</th>
      <td><input type="number" id="num3" name="number3"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td><input type="number" id="total" name="finaltotal" ></td>
    </tr>
</table>

CodePudding user response：

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;
      }

CodePudding user response：

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 >
  <tbody>
    <tr>
      <th scope="row">number1</th>
      <td><input type="number" id="num1" name="number1"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number2</th>
      <td><input type="number" id="num2" name="number2"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number3</th>
      <td><input type="number" id="num3" name="number3"  oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td><input type="number" id="total" name="finaltotal" ></td>
    </tr>
</table>

CodePudding user response：

To sum the values of the input fields, you will need to convert them to numbers with the parseInt() function before adding them. This is because the value returned by the getElementById() method is a string, not a number. Additionally, you may also want to add a check to make sure the input values are actually numbers and not empty string or non-numeric values. Here is how you could do it:

function add_number() {
  var n1 = parseInt(num1.value);
  var n2 = parseInt(num2.value);
  var n3 = parseInt(num3.value);

  // Check if the values are valid numbers
  if (isNaN(n1) || isNaN(n2) || isNaN(n3)) {
    // Show an error message or do something
    return;
  }

  var result = n1   n2   n3;
  document.getElementById("total").value = result;
}

It is also important to note that the add_number() function will be called every time any of the input fields change their value, so you may want to add some kind of logic to avoid performing the sum if any value is invalid or if any of the input fields is empty.