JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<p>En esta Formula de Prueba podemos ver que luego de colocar el precio de venta y el costo al seleccionar el impuesto este nos calcula automaticamente la utilidad</p>
<input type="text" name="articulo" placeholder="Articulo" />

<input type="text" name="pVenta" placeholder="Precio de Venta"/>
<input type="text" name="costo" placeholder="Costo"/>
<select id="imp">
  <option value="Seleccione Impuesto">Seleccione Impuesto</option>
  <option value="26">Gravado 26%</option>
  <option value="0">Excento 0%</option>
</select>
<br><hr>
<label for="">Impuesto de Venta</label>
<input type="text" name="impVenta" placeholder="Impuesto de Venta" value="Seleccione Impuesto" readonly/><br><br>
<label for="">Utilidad</label>
<input type="text" name="utilidad" placeholder="Utilidad Colones"/>

JavaScript

/*Verificamos el valor del impuesto seleccionado y llamamos a la funcion que realiza el calculo*/
$("select[id=imp]").on("change", function(){
	
  $("input[name=impVenta]").val($(this).val());
  
  calcula();
  
})
/*Calcula la utilidad basado en el impuesto seleccionado*/
function calcula(){

	if($("input[name=impVenta]").val()== "Seleccione Impuesto"){

			$("input[name=utilidad]").val(0)

	}else{

		var pVenta = parseInt($("input[name=costo]").val());
		var cargo = parseInt(($("input[name=costo]").val() * 

		$("input[name=impVenta]").val())/100);
  
		$("input[name=utilidad]").val(pVenta+cargo);

	}

}

/*Verifica en tiempo real si hay algun cambio en el campo costo para recalcular la utilidad de este nuevo monto*/
$("input[name=costo]").on("change", function(){

	calcula();

})