Use onkeyup event to update input?

Question

Use onkeyup event to update input?

Navigation

#1 by (1 votes)

0

I am developing a small calculator for paypal commissions, at times it works, but I would like to make a change that until now I have not been able to get it right. It turns out that I want that instead of having to click on the calculate button, to get the commission to pay. I want it to be automatically updated in the corresponding input when I type in the quantities.

I've tried adding an event listener to the input where the amount is received, but apparently it does not work that way, what I've done is something like this:

cantidadARecibir = document.getElementById('cantidadARecibir');
cantidadARecibir.addEventListener('onkeyup', function () {
    //Aquí el código de la calculadora
})

The code I have developed is the following:

Javascript

botonCalcular = document.getElementById('calcular'); 
botonCalcular.addEventListener('click', function () {
    cantidadARecibir = document.getElementById('cantidadARecibir');
    cantidadARecibir = Number(cantidadARecibir.value) || 0;

    tasaPorcentaje = document.getElementById('tasaPorcentaje');
    tasaPorcentaje = Number(tasaPorcentaje.value) || 5.4;

    if (cantidadARecibir > 0) {
        cantidadAEnviar = document.getElementById('cantidadAEnviar');
        cantidadAEnviar.className = 'exitoso';         
        //cantidadAEnviar.value = (((cantidadARecibir * (tasaPorcentaje/100)) + 0.3) + cantidadARecibir);         
        cantidadAEnviar.value = ((cantidadARecibir + 0.3) * 100 / (100 - tasaPorcentaje)).toFixed(2);
    }
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculadora de comisión paypal</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <script type="text/javascript" src="codigo.js"></script>
</head>
<body>
    <section id="contenedor">
        <div class="contenedorImportante">
            <header>
                <h1>Calculadora de comisiones <span class="logo pay">Pay</span><span class="logo pal">pal</span></h1>
            </header>
            <form action="">
                <input type="text" id="cantidadARecibir" placeholder="Para recibir">
                <input type="text" id="tasaPorcentaje" placeholder="Con una tasa de 5.4%">                         
                <input type="text" id="cantidadAEnviar" placeholder="Tendrían que enviarle" readonly>                
            </form>
            <div class="contenedorBotones">
                <button id="calcular">Calcular</button>
                <button id="limpiar">Limpiar</button>
            </div>      
        <div class="nota">
            <p>Dejando vacía la caja de "tasa", se toma por defecto el valor 5.4%</p>
        </div>
        </div>
    <footer>       
    <p class="copy">PayPal, es una empresa estadounidense que opera en casi todo el mundo un sistema de pagos en línea que soporta transferencias de dinero entre usuarios y sirve como una alternativa electrónica a los métodos de pago tradicionales como cheques y giros postales.
        <br><br>
        Este sitio web <b>no tiene ninguna relación con la web oficial de PayPal</b> (wwww.paypal.com), sólo tiene como finalidad ser una herramienta para poder calcular las comisiones de envios y así recibir o enviar los montos correctos.</p>
    <br><br>
        <p>Desarrollado por: <a class="enlace" href="http://pedrofumero.com/">Pedro Fumero</a><br><a href="https://twitter.com/PedroFumero">Twitter</a> - <a href="https://github.com/PedroFumero">Github</a></p>
    </footer>
    </section>
</body>
</html>

javascript

asked by Pedro Fumero 03.09.2017 в 17:23

source

1 answer

Return a value of a SQL Server SP working with DATASET in VB Select DISTINCT in codeigniter 3

score 1 · Accepted Answer

In fact you are doing it correctly, the only problem you have is in the name of the event. It is keyup instead of onkeyup .

Here the documentation: link

And here your code working:

botonCalcular = document.getElementById('calcular');
botonCalcular.addEventListener('click', function() {
  doCalc();
});
cantidadARecibir = document.getElementById('cantidadARecibir');
cantidadARecibir.addEventListener('keyup', function() {
  doCalc();
})


var doCalc = function() {
  cantidadARecibir = document.getElementById('cantidadARecibir');
  cantidadARecibir = Number(cantidadARecibir.value) || 0;

  tasaPorcentaje = document.getElementById('tasaPorcentaje');
  tasaPorcentaje = Number(tasaPorcentaje.value) || 5.4;

  if (cantidadARecibir > 0) {
    cantidadAEnviar = document.getElementById('cantidadAEnviar');
    cantidadAEnviar.className = 'exitoso';
    //cantidadAEnviar.value = (((cantidadARecibir * (tasaPorcentaje/100)) + 0.3) + cantidadARecibir);         
    cantidadAEnviar.value = ((cantidadARecibir + 0.3) * 100 / (100 - tasaPorcentaje)).toFixed(2);
  }
}

<section id="contenedor">
  <div class="contenedorImportante">
    <header>
      <h1>Calculadora de comisiones <span class="logo pay">Pay</span><span class="logo pal">pal</span></h1>
    </header>
    <form action="">
      <input type="text" id="cantidadARecibir" placeholder="Para recibir">
      <input type="text" id="tasaPorcentaje" placeholder="Con una tasa de 5.4%">
      <input type="text" id="cantidadAEnviar" placeholder="Tendrían que enviarle" readonly>
    </form>
    <div class="contenedorBotones">
      <button id="calcular">Calcular</button>
      <button id="limpiar">Limpiar</button>
    </div>
    <div class="nota">
      <p>Dejando vacía la caja de "tasa", se toma por defecto el valor 5.4%</p>
    </div>
  </div>
  <footer>
    <p class="copy">PayPal, es una empresa estadounidense que opera en casi todo el mundo un sistema de pagos en línea que soporta transferencias de dinero entre usuarios y sirve como una alternativa electrónica a los métodos de pago tradicionales como cheques y giros
      postales.
      <br><br> Este sitio web <b>no tiene ninguna relación con la web oficial de PayPal</b> (wwww.paypal.com), sólo tiene como finalidad ser una herramienta para poder calcular las comisiones de envios y así recibir o enviar los montos correctos.</p>
    <br><br>
    <p>Desarrollado por: <a class="enlace" href="http://pedrofumero.com/">Pedro Fumero</a><br><a href="https://twitter.com/PedroFumero">Twitter</a> - <a href="https://github.com/PedroFumero">Github</a></p>
  </footer>
</section>