JavaScript KeyUp() event for more than single-digit

user_14045437 0
Viewed 260

I'm building this simple JavaScript project where if I input number N then it will show 1 to N. I'm using keyup() event for this. If I remove N from the input field then It will show nothing, which is fine! Because I'm using the empty() function. It works for 1-9. But when I input 10, 11, 12... it first shows 1 then it shows 1 to 10 or 1 to 11 accordingly. I only need to see 1 to N(more than single-digit). I don't want to use button for this.

Here is my code:

$(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>

If this problem has better solution kindly share.

keyup jquery-events jquery javascript
2 Answers

You need to use the concept of debouncing using setTimeout. Your event is getting fired twice, once when you press '1' and when you press '0'. You need to hold the event until you are done with entering the numbers. The below code would work

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)
    
  })
});
user_157995770

As Barmar pointed out in the comments, you need to reset the output every time the event is fired. The keyup event happens immediately after the release a keyboard key. So your listener function is executed every digit you enter (after the release of the key).

So if you insert 155, it first will append number to 1-1, then from 1-15 (because when you type the second digit and release the key (event fired) your input contains 15), and at last digit it will print number from 1- to the current input value that is 155 (input contains 155) and so on if you add digits.

Thus your code would be:

$(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>`);                    
            }                            
        });
    });

Small suggestions:

Use a "buffer" for the output because the append method is a bit expensive to call every cycle. Better build the string apart and append it when you're done.
Use the input event, it's more semantic and related to input tag. And the event is fired whenever the input content change, so it's more immediate.

$(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);                            
        });
    });
user_155069150
Related