CODEWITHSUNDEEP
javascripthtml
user12813863
user12813863

Reputation:

adding up numerical values ​in the table (sum)

View:

<table>
    <tbody>
    <tr>
        <td><input class="days_tpu" type="number" id="sth_1"></td>
    </tr>
    <tr>
        <td><input class="days_tpu" type="number" id="sth_2"></td>
    </tr>
    <tr>
        <td><input class="days_tpu" type="number" id="sth_3"></td>
    </tr>
    </tbody>

    // field in which it will add up
    <tfoot>
    <th><input id="id_days_tpu" type="time" type="text"></th>

    </tfoot>
</table>

I tried:

but, it doesn't work

Javascript:

const days_tpu_s = [...document.getElementsByClassName("days_tpu")];

//or

const table = document.querySelector('table');


table.sumInputs = function () {
    var inputs = document.getElementsByClassName('days_tpu'),
        result = document.getElementById('sum_id_days_tpu'),
        sum = 0;

    for (var i = 0; i < inputs.length; i++) {
        var ip = inputs[i];

        if (ip.name && ip.name.indexOf("total") < 0) {
            sum += parseInt(ip.value) || 0;
        }

    }

    result.value = sum;
}
 sumInputs();

anyone have a good idea?

Upvotes: 0

Views: 31

Answers (1)

Mamun
Mamun

Reputation: 68933

You can use Array.prototype.map() to get all the input value the use Array.prototype.reduce() to sum them.

Demo:

const days_tpu_s = [...document.getElementsByClassName("days_tpu")];
function sumInputs() {
  var sum = days_tpu_s.map(i => Number(i.value)).reduce((a, c) => a + c, 0);
  document.getElementById('id_days_tpu').value = sum;
}
days_tpu_s.forEach(function(el){
  el.addEventListener('input', sumInputs);
});
<table>
  <tbody>
    <tr><td><input class="days_tpu" type="number" id="sth_1"></td></tr>
    <tr><td><input class="days_tpu" type="number" id="sth_2"></td></tr>
    <tr><td><input class="days_tpu" type="number" id="sth_3"></td></tr>
  </tbody>

  // field in which it will add up
  <tfoot>
    <th><input id="id_days_tpu" type="text"></th>
  </tfoot>
</table>

Upvotes: 1

Related Questions