Tecnología y Coaching para Emprendedores

Tutorial: Crea una Calculadora del IVA con JavaScript

javascript

Este tutorial es ideal para aquellos que justo os iniciáis en JavaScript y queréis aprender con un ejemplo. En este tutorial vamos a aprender a crear una calculadora del IVA con JavaScript. Crearemos un formulario en el que el usuario pondrá el subtotal y el tanto por ciento de IVA y el sistema calculará el total con IVA y el valor del IVA aplicado.

El documento xHTML

Vamos a crear un formulario con 4 campos, de los cuales 2 están deshabilitados para el usuario, pues lo calcula nuestro archivo JavaScript.. Hemos resaltado el código con el que llamamos a los archivos externos style.css e iva.js de JavaScript, con los que damos formato al documento HTML y hacemos los cálculos, respectivamente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
   <title>Calculadora del IVA</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script type="text/javascript" src="iva.js"></script>
</head>

<body>
<div id="content">
   <h1>Calculadora del IVA</h1>
   <p>Introduce un valor y pulsa "Calcular".</p>
   <div id="calculadora_iva">
      <label for="subtotal">Subtotal:</label>
      <input type="text" id="subtotal"/><br/>
      
      <label for="porcentaje_iva">% IVA:</label>
      <input type="text" id="porcentaje_iva"/> %<br/>
      
      <label for="total"> Total:</label>
      <input type="text" id="total" disabled="disabled"/><br/>
      
      <label for="iva_venta">IVA:</label>
      <input type="text" id="iva_venta" disabled="disabled"/><br/>
      
      <label>&nbsp;</label>
      <input type="button" id="calcular" value="Calcular"/><br/>
   </div>
</div>
</body>
</html>

Si estás familiarizado con HTML, deberías poder entender la mayor parte de este código. Es interesante fijarse en la propiedad disabled del campo input, pues esta es la que evita que el usuario pueda introducir algún valor en estos campos y la que permite que lo haga nuestro documento iva.js.

El documento CSS

El documento CSS lo guardamos en la misma carpeta que el documento HTML que justo acabamos de crear y lo llamamos style.css. Es un documento sencillo que da el formato básico a la calculadora, siéntete libre de modificarlo a tu gusto:

body {
   font-family:Verdana, Arial, sans-serif;
   background:#333;
}
#content {
   width:400px;
   margin:20px auto;
   padding:5px 20px;
   background:#fff;
   border:1px solid #000;
}
#content h1 {
   color:#333;
}
#calculadora_iva label {
   display:block;
   width:200px;
   text-align:right;
   padding-right:20px;
   float:left;
}
#calculadora_iva input {
   display:block;
   float:left;
   margin-right:10px;
}
#calculadora_iva br {
   clear:both;
   margin-bottom:10px;
}

Ahora tenemos ya la calculadora creada a nivel visual y nos falta implementar el JavaScript que le dé su función de calculadora:

calculadora iva

El archivo JavaScript

Si nunca has visto JavaScript, no te asustes, en seguida te explicaremos todo paso a paso, no es tan difícil como parece de entrada. Crea un archivo iva.js y guárdalo junto con el documento HTML y CSS.

var $ = function(id) {
   return document.getElementById(id);
}

var calculadora = function () {
   var subtotal = parseFloat ($("subtotal").value);
   var porcentaje_iva = parseFloat ($("porcentaje_iva").value);
   
   $("iva_venta").value = "";
   $("total").value = "";
   
   if (isNaN(subtotal) || subtotal < 0 ) {
      alert ("El subtotal tiene que ser un número igual o mayor que cero");
   } else if (isNaN(porcentaje_iva) || porcentaje_iva < 0) {
      alert ("El porcentaje de IVA debe ser un número igual o mayor que cero");
   } else {
      var iva_venta = subtotal * (porcentaje_iva/100);
      iva_venta = parseFloat(iva_venta.toFixed(2));
      var total = subtotal + iva_venta;
      $("total").value = total.toFixed(2);
      $("iva_venta").value = iva_venta;
   }
}

window.onload = function () {
   $("calcular").onclick = calculadora;
}

Lo primero que hemos hecho ha sido crear una función llamada $, un nombre común para una función de este tipo:

var $ = function(id) {
   return document.getElementById(id);
}

Esta función lo que hace es que cuando ve un $(id), lo sustituye por document.getElementById(id). Esto nos evita tener que escribir mil veces document.getElementById(id). Así, en nuestro ejemplo $("subtotal") es lo mismo que document.getElementById("subtotal").

document.getElementById(id) es un método del documento objeto (parte del DOM), que permite tomar el control del elemento del HRML que tiene el mismo id. Esto es lo que nos permite obtener el valor que escribe el usuario en el campo subtotal y en el campo IVA para, posteriormente, calcular el total y el IVA de la venta para mostrárselo al usuario.

La siguiente función la hemos llamado calculadora. Fijémonos que en JavaScript cuando definimos una función el nombre de la misma empieza por var:

var calculadora = function () {
  .. 
}

Ahora vamos a ver todo lo que sucede dentro de la función calculadora. Primero de todo, necesitamos obtener los valores de los cuatro campos de nuestro formulario. Los dos primeros han sido introducidos por el usuario, por lo que los obtendremos con el método document.getElementById(id) utilizando la función $:

   var subtotal = parseFloat ($("subtotal").value);
   var porcentaje_iva = parseFloat ($("porcentaje_iva").value);

La función parseFloat() convierte el valor entre paréntesis a un valor de coma flotante (decimal). Lo que decimos aquí es que guarde en una variable que creamos ahora llamada subtotal el valor que el usuario ha introducido en el campo “subtotal” y que este valor lo convierte a coma flotante. Si no hubiésemos creado la función $, habríamos puesto esto:

   var subtotal = parseFloat (document.getElementById("subtotal").value);
   var porcentaje_iva = parseFloat (document.getElementById("porcentaje_iva").value);

La función $ nos ahorra escribir de manera repetida lo mismo y también nos ayuda a crear un código más limpio y legible.

Ahora hemos de crear dos variables para los campos “iva_venta” y “total”. La diferencia con los otros dos campos, es que de estos todavía no tenemos un valor, pues lo ha de calcular el archivo JavaScript. con lo que los creamos y no les asignamos por el momento ningún valor:

$("iva_venta").value = "";
$("total").value = "";

Lo siguiente es que no queremos que el usuario introduzca un valor no numérico o negativo. Existe una función en JavaScript llamada isNaN que devuelve true si el resultado no es un número. Lo que ahora hacemos es comprobar los dos valores que ha introducido el usuario. si uno de ellos no es un número o es un número negativo, le sale una ventana emergente de alerta diciéndole que debe introducir un número igual o mayor que cero:

if (isNaN(subtotal) || subtotal < 0 ) {
      alert ("El subtotal tiene que ser un número igual o mayor que cero");
   } else if (isNaN(porcentaje_iva) || porcentaje_iva < 0) {
      alert ("El porcentaje de IVA debe ser un número igual o mayor que cero");
   } 

En el caso que las dos condiciones anteriores den false, es decir, el usuario haya introducido dos números iguales o mayores que cero, procederá a hacer los cálculos correspondientes a nuestra calculadora del IVA:

     else {
      var iva_venta = subtotal * (porcentaje_iva/100);
      iva_venta = parseFloat(iva_venta.toFixed(2));
      var total = subtotal + iva_venta;
      $("total").value = total.toFixed(2);
      $("iva_venta").value = iva_venta;
   }

toFixed(2) es una función que indica que si hay varios decimales, redondee el resultado a sólo dos decimales.

La primera fila calcula el valor del IVA de la venta y la segunda redondea este valor a dos decimales.

La tercera fila calcula el valor total de la venta, que es igual al precio sin IVA más el IVA de la venta que justo acabamos de calcular.

La cuarta y quinta filas utilizan la función $ para mostrar estos valores en los campos total e iva_venta del formulario.

La tercera y última función se ejecuta cuando el evento window.onload tiene lugar. Esto sucede cuando la página web se carga completamente en la pantalla del navegador.

window.onload = function () {
   $("calcular").onclick = calculadora;
}

Lo que esta función indica es que cuando el usuario haga clic en el elemento con id “calcular”, se ejecute la función calculadora.

Podéis descargar los archivos de la calculadora del IVA con JavaScript y adaptarlo a vuestras necesidades.


Comentarios

  • Alonso

    Muy bueno el tutorial, por fin encontré lo que buscaba. Aunque estoy programando código para realizar una tabla de amortizaciones de un crédito, este tutorial es básico.

    • eSandra

      Me alegro te haya servido! Un abrazo :-)