6

Necesito insertar un Monto en un campo de texto ...al salir de ese campo, debo calcular el impuesto sobre ese monto (impuesto = monto * 0.12) también el total ( total = monto + impuesto) y establecer estos valores en otros campos de texto automáticamente.

Código HTML

<input type="text" id="Monto" name="Monto" placeholder="Monto" onchange="CalculoIva()" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva"  required />
<input type="text" id="Total" name="Total" placeholder="Total"  required />

Estoy intentando esto pero no funciona

 <script lang="javascript" type="text/javascript">
       var monto = 0;
       onchange = CalculoIva();
       function CalculoIva() {
           monto = document.getElementById('Monto').innerText ;
           var iva = parseFloat(monto) * 0.12;
           var total = parseFloat(monto) + parseFloat(iva);
           document.getElementById("Iva").innerHTML = iva.toString();
           document.getElementById("Total").innerHTML = total.toString();
       }
   </script> 
5
  • 1
    No funciona, pero por qué. No se ejecuta el evento? no es el valor deseado? Que tipo de error te da?
    – lois6b
    el 28 oct. 2016 a las 11:34
  • No me da error simplemente no obtiene el texto la variable monto es vacio el 28 oct. 2016 a las 11:35
  • En vez de .innerText en la var monto usa .value. Además al inicializar la var a 0 se hace tipo int. y el valor de un campo de texto es string. has de parsear y comprobar que el valor en efecto es int antes de asignarlo
    – lois6b
    el 28 oct. 2016 a las 11:37
  • 3
    y el código onchange = CalculoIva(); q tienes dentro del código javascript en la 3 linea creo que tampoco te hace falta
    – Joacer
    el 28 oct. 2016 a las 11:38
  • el onchange de HTML hace referencia directamente a una función javascript que hayas definido. No necesitas almacenarla en una variable.
    – Zander
    el 28 oct. 2016 a las 12:45

2 respuestas 2

3

He refactorizado un poco el código de la respuesta de sioesi

  • Eliminado inline javascript en HTML
  • Los inputs: iva y total cambiado a readonly
  • La función CalculoIva() es ahora reutilizable
  • Verifica si el valor de monto es numérico
  • Resetea todos los campos si no es un numero válido
  • Cambiado el punto por comma (Standard Europeo)
  • Formato resultado iva y total a 2 decimales (0,00)

function CalculoIva(monto, iva, total) {
  
  montoParse = parseFloat(monto.value);
  
  if (typeof montoParse === 'number' && !isNaN(montoParse)) {
    
      var ivaCalc   = montoParse * 0.12;
      var totalCalc = montoParse + ivaCalc;
    
      iva.value   = ivaCalc.toFixed(2).replace('.', ',');
      total.value = totalCalc.toFixed(2).replace('.', ',');
    
  } else {
    
      iva.value   = '';
      total.value = '';
      monto.value = '';
      console.log('Introduce un numero válido');
  }
}

var monto = document.getElementById('Monto');
var iva   = document.getElementById('Iva');
var total = document.getElementById('Total');


monto.onchange = function(){ CalculoIva(monto, iva, total); }
<input type="text" id="Monto" name="Monto" placeholder="Monto" required>
<input type="text" id="Iva" name="Iva" placeholder="Iva"  readonly>
<input type="text" id="Total" name="Total" placeholder="Total" readonly>

3

Debes hacer algo asi

function CalculoIva() {
    var monto = document.getElementById('Monto').value;
    if(isNaN(monto)){
        alert("Introduce un numero, por favor");
        document.getElementById('Monto').value = "";
    }else{
        var iva = parseFloat(monto) * 0.12;
        var total = parseFloat(monto) + parseFloat(iva);
        document.getElementById("Iva").value = iva;
        document.getElementById("Total").value = total;
    }
};
<input type="text" id="Monto" name="Monto" placeholder="Monto" onChange="CalculoIva();" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva" required />
<input type="text" id="Total" name="Total" placeholder="Total" required />

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.