Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] calcular porcentaje no me carga (NaN)

Estas en el tema de calcular porcentaje no me carga (NaN) en el foro de Javascript en Foros del Web. saludos amigos estoy tratando de calcular el porcentaje pero no logro que me muestre el resultado del mismo en el campo total anexo código para ...
  #1 (permalink)  
Antiguo 29/01/2018, 16:33
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 205
Antigüedad: 1 año, 10 meses
Puntos: 1
calcular porcentaje no me carga (NaN)

saludos amigos estoy tratando de calcular el porcentaje pero no logro que me muestre el resultado del mismo en el campo total

anexo código para una mejor compresión

https://jsfiddle.net/yoclens/poqwcgc1/3/



formulario.

Código HTML:
Ver original
  1. <div id="ejemplar1">
  2.  
  3. <div class="input-field col s12 m3">
  4. <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
  5. <label for="ejemplar">Ejemplar:</label>
  6. </div>
  7.  
  8. <div class="input-field col s12 m2">
  9. <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
  10. <label for="peso">Peso:</label>
  11. </div>
  12.  
  13. <div class="input-field col s12 m2">
  14. <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar1')" required/>
  15. <label for="dividendo">Dividendo:</label>
  16. </div>
  17.  
  18.  
  19.  
  20. <div class="input-field col s12 m2">
  21. <input id="icon_prefix" type="text" class="black-text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="total(this.form)"  required/>
  22. <label for="porcentaje">porcentaje:</label>
  23. </div>
  24.  
  25.  
  26.  
  27. <div class="input-field col s12 m3">
  28. <input id="total" type="text" name="total[]" />
  29. <label for="total">Total:</label>
  30. </div>
  31.  
  32. </div>


función para calcular

Código Javascript:
Ver original
  1. function total(iddiv){
  2.     var resultado;
  3.     var x=0;
  4.     var y=0;
  5.     //obtengo el elemento input
  6.     var divv = document.getElementById(iddiv);
  7.  
  8.     var inputv = divv.getElementsByTagName("input");   
  9.    
  10.     x = parseInt (inputv[2].value); // campo dividendo
  11.     y = parseInt (inputv[3].value); //campo porcentaje
  12.  
  13.     resultado = x * y;
  14.  
  15.     inputv[4].value=resultado;  //se muestra valor en total
  16. }

gracias de ante mano
__________________
yoclens avilan
  #2 (permalink)  
Antiguo 29/01/2018, 17:16
Avatar de hhs
hhs
 
Fecha de Ingreso: junio-2013
Ubicación: México
Mensajes: 2.864
Antigüedad: 4 años, 7 meses
Puntos: 341
Respuesta: calcular porcentaje no me carga (NaN)

Esto no tiene nada que ver con php, por favor solicita que muevan tu mensaje al foro correspondiente.
__________________
Saludos
About me
Laraveles
A class should have only one reason to change.
  #3 (permalink)  
Antiguo 29/01/2018, 17:20
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.799
Antigüedad: 9 años, 6 meses
Puntos: 2125
Respuesta: calcular porcentaje no me carga (NaN)

Muevo tu tema a Javascript.
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 29/01/2018, 19:00
Avatar de manuparquegiralda  
Fecha de Ingreso: junio-2012
Ubicación: Barcelona
Mensajes: 231
Antigüedad: 5 años, 7 meses
Puntos: 34
Respuesta: calcular porcentaje no me carga (NaN)

A ver, te cuento, llamas a la función total() cuando cambia el campo "dividendo" y cuando quitas el Focus del campo porcentaje. El problema es que cuando cambias el campo "dividendo" aún no has rellenado el campo "porcentaje". Cómo haces un parseInt de un valor vacío te devuelve NaN. Antes de ejecutar la función parseInt tienes que asegurarte que ambos campos están rellenos con valores numéricos.

Para hacerlo puedes hacer una comprobación en JavaScript de modo que si no hay valor retorne.

Para asegurarte que sean números puedes utilizar el input[type=number] de HTML5.

Por otro lado, en el campo "porcentaje" en el evento on-blur haces mención a this.form, pero no hay ningún formulario en el HTML.

El atributo required solo funciona si los campos están dentro del formulario y solo evita que se envié el formulario si no están todos los campos completados. Igual para el atributo pattern. Los atributos de validación solo funcionan dentro de formularios.

Dale una vuelta al código que la verdad es que está regular, aprovecha más el JavaScript y vacía un poco el HTML con la función addEventListener de JavaScript.

Y como consejo estudia la PPOO y las clases de ECMA6, te van a facilitar mucho la vida a la larga y te van a limpiar mucho el código.

Un saludo.
__________________
Diseño Web - Arisman Web



La zona horaria es GMT -6. Ahora son las 23:59.