[SOLUCIONADO] calcular porcentaje no me carga (NaN)

[aviweb2015]

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:

<div id="ejemplar1">
 
<div class="input-field col s12 m3">
<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/>
<label for="ejemplar">Ejemplar:</label>
</div>
 
<div class="input-field col s12 m2">
<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/>
<label for="peso">Peso:</label>
</div>
 
<div class="input-field col s12 m2">
<input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar1')" required/>
<label for="dividendo">Dividendo:</label>
</div>
 
 
 
<div class="input-field col s12 m2">
<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/>
<label for="porcentaje">porcentaje:</label>
</div>
 
 
 
<div class="input-field col s12 m3">
<input id="total" type="text" name="total[]" />
<label for="total">Total:</label>
</div>
 
</div>
 

función para calcular

Código Javascript:

function total(iddiv){
    var resultado;
    var x=0;
    var y=0;
    //obtengo el elemento input
    var divv = document.getElementById(iddiv);
 
    var inputv = divv.getElementsByTagName("input");    
    
    x = parseInt (inputv[2].value); // campo dividendo
    y = parseInt (inputv[3].value); //campo porcentaje
 
    resultado = x * y;
 
    inputv[4].value=resultado;  //se muestra valor en total
}
 

gracias de ante mano

[hhs]

Esto no tiene nada que ver con php, por favor solicita que muevan tu mensaje al foro correspondiente.

[Triby]

Muevo tu tema a Javascript.

[manuparquegiralda]

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.