[SOLUCIONADO] Problema para correr un jquery o JS

erickmpos · #1 (**permalink**) 14/03/2016, 16:12

buenas compañeros,

Tengo el siguiente codigo que me pasaron para hacer lo mismo, sin embargo, cuando trarto de ejecutarlo no me lo permite, no se cual sera el error, pero cuando le doy al impuesto de venta que es por medio de un ¨select¨, no me actualiza los otros campos, les muestro el ejemplo : https://jsfiddle.net/xfxstudios/a6ktk4nu/

Este es mi codigo:

Código HTML:

Ver original<!DOCTYPE html>
 
<html>
    <head>
        <title>TODO supply a title</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
<!--AQUI LLAMAMOS LA LIBRERIA JQUERY-->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="pruebaerick.js"></script>
        <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"/>
    </body>
</html>

Este es mi codigo JS:

Código Javascript:

Ver original/*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();
 
});

Les agradeceria toda ayuda.

andresgarciadev · #2 (**permalink**) 14/03/2016, 17:41

mete todo tu codigo de pruebaerick.js en un ready, el problema es que esta tratando de usar jquery cuando aun no existe, debes esperar a que cargue

Código Javascript:

Ver original$(document).on("ready", function(){
--codigo--
});

erickmpos · #3 (**permalink**) 14/03/2016, 18:30

Buenas andresgarciadev,

lo hice de la siguiente manera:
1.Prueba.HTML

Código HTML:

Ver original<!DOCTYPE html>
 
<html>
    <head>
        <title>TODO supply a title</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script type="text/javascript" src="pruebaerick.js"></script>
        <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">Exento 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"/>
    </body>
</html>

2. Pruebaerick.js

Código Javascript:

Ver original$(document).on("ready", function(){
   /*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();
 
        }); 
});

Sim embargo no me lo carga. Soy la persona mas nueva que puede haber en JS, no se si hay que descargar alguna libreria (por ahi lei que se tenia que descargar y baje esta: jquery-1.12.1.min) y la puse en la misma carpeta donde esta: pruebaerick.js, prueba.html.

Sera que se hace algun otro llamado para que me haga lo pedido, seran los inputs y labels de impuesto venta y utilidad que estan mal?

Código HTML:

Ver original<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"/>

me dice que utilizar un (for="") no debe ir vacio en el label.

No se si hay que configurar algo mas, porque estoy trabajando todo en PHP, solamente que deseo hacer esta parte en JS porque es mucho mas rapido para uno el trabajarlo, sin salirme de la pagina.

Muchas gracias!

andresgarciadev · #4 (**permalink**) 15/03/2016, 15:06

pero no dije que sacaras el
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
XD , solo que tenia que estar antes xk el problema era que cuando iniciaba pruebaerick.js el jquery aun no habia cargado
en otras palabras... solo agrega esa linea al codigo y no veo algun otro error

erickmpos · #5 (**permalink**) 15/03/2016, 15:30

Listo!!! Ahora si me funciona a la perfección!!!! Muchas gracias Andres!!!!! Una salvadota me dio!
Pura Vida!