将各种输入类型编号的值相加并实时显示总数

Question

我想将各种输入类型编号的所有值相加并显示其他div中的总数

这是输入值的html代码（它们在表格中）

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

这是div的html，它将显示总数：

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

所以我想添加我拥有的6个输入的所有值。可以是6个值，也可以只有一个。

我正在使用这个javascript功能添加，但问题是，我想，实时显示结果：

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

您需要定义功能之外的总数。

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