Sum the value of various input type numbers and display the total number in real time

Question

I want to sum all the values of various input type number and display the total number in other div

This is the html code for the input values (They are inside a table)

<div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>#</th>
                                            <th>Tamanhos</th>
                                            <th>Peças por Tamanho</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio1"></label>
                                                </div>
                                            </th>
                                            <td scope="row">1</td>
                                            <td>XS</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" class="form-username form-control" onkeypress="myFunction(this.value)"></td>
                                        </tr>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio2"></label>
                                                </div>
                                            </th>
                                            <td scope="row">2</td>
                                            <td>S</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" min="0" class="form-username form-control" onchange="myFunction(this.value)"></td>
                                        </tr>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio3"></label>
                                                </div>
                                            </th>
                                            <td scope="row">3</td>
                                            <td>M</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" min="0" class="form-username form-control" onchange="myFunction(this.value)"></td>
                                        </tr>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio4"></label>
                                                </div>
                                            </th>
                                            <td scope="row">4</td>
                                            <td>L</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" min="0" class="form-username form-control" onchange="myFunction(this.value)"></td>
                                        </tr>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio5"></label>
                                                </div>
                                            </th>
                                            <td scope="row">5</td>
                                            <td>XL</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" min="0" class="form-username form-control" onchange="myFunction(this.value)"></td>
                                        </tr>
                                        <tr>
                                            <th><div class="checkbox">
                                                    <label><input type="checkbox" id='regular' name="optradio6"></label>
                                                </div>
                                            </th>
                                            <td scope="row">6</td>
                                            <td>XXL</td>
                                            <td><input type="number" name="pecas" placeholder="Peças por Tamanho" min="0" class="form-username form-control" onchange="myFunction(this.value)"></td>
                                        </tr>
                                        </tbody>
                                    </table>

And this is the html for the div that will show the total number:

<div class="form-group" id="divID">
                                    Numero Total de Peças:
                                </div>

So i want to add all the values of the 6 inputs that I have. Could be the 6 values or just one.

I'm using this javascript funtion to add, but the problem is, I suppose, display the result in real time:

function myFunction(value2){

        var display = document.getElementsByName('divID');
        var tot=0;
        for(var i=0;i<value2.length;i++){
            if(parseInt(value2[i].value))
                tot += parseInt(value2[i].value);
        }
    }

Answer 1

You need to define the total outside your function.

var tot=0;
function myFunction(c){    
     tot += parseInt(c) ? parseInt(c) : 0;
     document.getElementsById('divID').innerHTML = tot.toString(); 
 }