Javascript Sum Fields Error NaN

Question

No mather what I write in the input fields I only get NaN even from the page load I get NaN

Any idea why? I need quantity to * by price and give a result, here is the code. I will display the code now

    <form action="?F=save-sale" method="post" name="venta">
<table class="table-global">
      <tr>
        <td class="table-global-td-title">Cantidad

         </td>
        <td class="table-global-td-title">Precio venta</td>
        <td class="table-global-td-title">Vendedor</td>
        <td class="table-global-td-title">Documento</td>

        <td class="table-global-td-title">M&eacute;todo de pago</td>
        <td class="table-global-td-title">Suma total</td>
        <td class="table-global-td-title"></td>
        </tr>
      <tr>
        <td class="table-global-td-subtitle"><input type="number" class="input-global-100" name="cantidad" id="cantidad">          </td>
          <td class="table-global-td-subtitle"><input type="number" class="input-global-100" name="venta" id="venta" value="0"></td>
           <td class="table-global-td-subtitle"> 
           <select style="text-transform:capitalize" class="select-global-120" name="vendedor" id="vendedor">

  <option value="" selected>Seleccionar</option>
  <option value="001">001</option>

</select>          </td>
        <td class="table-global-td-subtitle"> <select class="select-global-132" name="comprobante" id="comprobante">


          <option value="Boleta" selected>Boleta</option>        
          <option value="Factura">Factura</option>


          </select>        </td>
        <td class="table-global-td-subtitle"><select class="select-global-120" name="metodo" id="metodo" >
          <option value="Transferencia">Transferencia</option>

          <option value="Efectivo" selected>Efectivo</option>
          <option value="Cheque">Cheque</option>
          <option value="Transbank">Transbank</option>



        </select></td>
        <td class="table-global-td-subtitle">

          <input type="text" class="input-global-total-100" name="ventatotal" id="ventatotal" readonly value="0" />        </td>
        <td class="table-global-td-subtitle">
        <input class="submit-global-120" type="submit" value="Realizar la venta" /></td>
      </tr>
      </table>

<script>
var aacosto    = document.getElementsByName('costo')[0];
var aacostototal = document.getElementsByName('costototal')[0];
var aaventa     = document.getElementsByName('venta')[0];
var aaventatotal    = document.getElementsByName('ventatotal')[0];
var aacantidad   = document.getElementsByName('cantidad')[0];
var aaganancia   = document.getElementsByName('ganancia')[0];
var aagananciatotal   = document.getElementsByName('gananciatotal')[0];

function updateInput() {
aaventatotal.value = parseFloat(aaventa.value) * parseFloat(aacantidad.value);

}

aaventa.addEventListener('keyup', updateInput);
aaventatotal.addEventListener('change', updateInput);
aacantidad.addEventListener('keyup', updateInput);
updateInput();
</script>
</form>

Here is a Fiddle so you guys can see it working

https://fiddle.jshell.net/v6spxoqv/10/

Answer 1

Just have this condition if (aaventa.value && aacantidad.value) before calculating the product. It makes sure that the values are not empty. Everything else is fine.

var aaventa = document.getElementsByName('venta')[0];
var aaventatotal = document.getElementsByName('ventatotal')[0];
var aacantidad = document.getElementsByName('cantidad')[0];

function updateInput() {
  if (aaventa.value && aacantidad.value)
    aaventatotal.value = parseFloat(aaventa.value) * parseFloat(aacantidad.value);
  else
    aaventatotal.value = 0;

}

aaventa.addEventListener('keyup', updateInput);
aaventatotal.addEventListener('change', updateInput);
aacantidad.addEventListener('keyup', updateInput);
updateInput();

<input name="venta">
<input name="cantidad">
<input name="ventatotal">