Estoy construyendo este proyecto de JavaScript simple donde si ingreso el número N, mostrará 1 a N. Estoy usando el evento keyup() para esto. Si elimino N del campo de entrada, no mostrará nada, ¡lo cual está bien! Porque estoy usando la función de empty() . Funciona para 1-9. Pero cuando ingreso 10, 11, 12... primero muestra 1 y luego muestra 1 a 10 o 1 a 11 según corresponda. Solo necesito ver 1 a N (más de un solo dígito). No quiero usar el botón para esto.
Aquí está mi código:
$(document).ready(function() { $('#code').keyup(function() { let myCode = $('#code').val(); if (myCode == '') { $('#output').empty(); } for (let i = 1; i <= myCode; i++) { $('#output').append(i + '<br>'); } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="number" id="code"> <br> <br> <div id="output"></div> </body> </html>Si este problema tiene una mejor solución, amablemente comparta.
Debe usar el concepto de antirrebote usando setTimeout. Su evento se dispara dos veces, una cuando presiona '1' y cuando presiona '0'. Debe celebrar el evento hasta que haya terminado de ingresar los números. El siguiente código funcionaría
var timer; $(document).ready(function() { $('#code').keyup(function() { clearTimeout(timer) timer = setTimeout(function(){let myCode = $('#code').val(); if (myCode == '') { $('#output').empty(); } for (let i = 1; i <= myCode; i++) { $('#output').append(i + '<br>'); }},1000) }) });Como señaló Barmar en los comentarios, debe restablecer la salida cada vez que se activa el evento. El evento keyup ocurre inmediatamente después de soltar una tecla del teclado. Entonces, su función de escucha se ejecuta cada dígito que ingresa (después de soltar la tecla).
Entonces, si inserta 155, primero agregará el número al 1-1, luego del 1 al 15 (porque cuando escribe el segundo dígito y suelta la tecla (evento activado) su entrada contiene 15), y en el último dígito se imprimirá número de 1- al valor de entrada actual que es 155 (la entrada contiene 155) y así sucesivamente si agrega dígitos.
Por lo tanto, su código sería:
$(document).ready(function () { $('#code').on('keyup', function () { let myCode = $('#code').val(); // when event happens reset the output field, so it is overridden with the new serie $('#output').empty(); for (let i = 1; i <= myCode; i++) { $('#output').append(`${i}<br>`); } }); }); Use un "búfer" para la salida porque el método de agregar es un poco costoso para llamar a cada ciclo. Mejor construya la cadena aparte y agréguela cuando haya terminado.
Use el evento de entrada , es más semántico y está relacionado con la etiqueta de entrada. Y el evento se activa cada vez que cambia el contenido de entrada, por lo que es más inmediato.
$(document).ready(function () { $('#code').on('input', function () { let myCode = $('#code').val(); $('#output').empty(); let string = ''; for (let i = 1; i <= myCode; i++) { string += `${i}<br>`; } $('#output').append(string); }); });