JSFiddle - React, Tailwind, and code Playground

by yoclens avilan

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>

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
}