Home / Questions / 348135
Accepted
DAD
Asked: 2020-04-22 13:31:21 +0800 CST 2020-04-22 13:31:21 +0800 CST

How to add the total of columns, and show the total even if one or more inputs is "empty", Javascript

  • 772

Well, I have a simple table so that I can quickly understand what I need because the original table is too big, so I made this quick example:

 function calcular_c(){
        const tiempo1 = parseInt(document.getElementById('tiempo1').value);
        const costo1 = parseInt(document.getElementById('costo1').value);
       
        const tiempo2 = parseInt(document.getElementById('tiempo2').value);
        const costo2 = parseInt(document.getElementById('costo2').value);

        const tiempo3 = parseInt(document.getElementById('tiempo3').value);
        const costo3 = parseInt(document.getElementById('costo3').value);

        const total1 = tiempo1 * costo1 ; 
        const total2 = tiempo2 * costo2 ; 
        const total3 = tiempo3 * costo3 ; 

        document.getElementById('total1').value = total1;
        document.getElementById('total2').value = total2;
        document.getElementById('total3').value = total3;
        
        const suma_horas = tiempo1 + tiempo2 + tiempo3;
        const suma_total = total1+  total2 + total3 ;

        document.getElementById('total_tiempo').value = suma_horas;
        document.getElementById('total_total').value = suma_total;
    
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <th>tiempo</th>
                <th>costo</th>
                <th>total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo1" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo1" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total1" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo2" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo2" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total2" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo3" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo3" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total3" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tfoot>
            <tbody>
                <tr>
                    <th>total tiempo</th>
                    <th></th>
                    <th>total suma</th>
                </tr>
                <tr>
                    <th><input type="number" class="form-control" id="total_tiempo" value="" onkeyup="calcular_c();"></th>
                    <th></th>
                    <th><input type="number" class="form-control" id="total_total" value="" onkeyup="calcular_c();"></th>
                </tr>
            </tbody>
        </tfoot>
    </table>
</div>

What I need is that when I enter an amount it is shown in the total, regardless of whether there are still fields to fill vertically (columns)

Example what I want to achieve:

enter image description here

So as you can see in the image, I would like that by filling only 1 or 2 inputsthe total of that column is shown.

javascript

1 Answers

  1. Best Answer

    Just check if it has been possible to parse the value as a number. I would recommend you to use a helper function:

    function ensureNumber( val, def ) {
  var def = def || 0;
  var parsed = parseInt( val );

  return isNaN( parsed ) ? def : parsed;
}

    And change your code to

    const tiempo1 = ensureNumber( document.getElementById( 'tiempo1' ).value );
...

    By default, it returns 0if the value is not a number. If you need another value (for example, to multiply), just pass it as the 2nd argument:

    const costo1 = ensureNumber( document.getElementById( 'tiempo1' ).value, 1 );
    • 1