的Javascript总和字段错误的NaN

Question

没有马瑟我写在输入字段什么，我只甚至从页面加载，我得到NaN的

任何想法，为什么得到喃？我需要数量*以价格并给出结果，这里是代码。我将显示现在的代码

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

这里是一个小提琴所以你们可以看到它的工作

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

Answer 1

只要有计算产品之前，这个条件if (aaventa.value && aacantidad.value)。它确保值不是空。其他一切都很好。

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

Answer 2

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

使用jQuery

$('#venta').change(function(){ updateInput() ;}); 
$('#cantidad').change(function(){ updateInput() ;}); 
$('#ventatotal').change(function(){ updateInput() ;});