ASP.NET My Javascript is not working

Question

Hello, I’m using Javascript to create a numbering in a Textarea when the Enter key is pressed, an example :

1. Olá
2. Isto é isto
3. Fim

This Javascript, however, is not working and I do not know why, here is Javascript:

<script type="text/javascript">
  $("#num").keyup(function (event) {
    if (event.which != 13)
      return;
    var elm = $(this);
    var lines = elm.val().split("\n");
    for (var i = 0; i < lines.length; i++)
      lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i + 1) + ". ");
      elm.val(lines.join("\n"));
    });
</script>

And this is the Textarea code:

<textarea id="num" rows="5" cols="32">1. </textarea>

It’s not working and I’ve tried several things, I know the code works, though, because I went to an online compiler and it was running perfectly.

Answer 1

Remember to insert jQuery into the page and run the script only after you have already loaded the HTML. Because the code itself works perfectly - see at the end of the answer the executable example.

You said in the question that you are using ASP.NET, so the problem should be with the order of things. Note that the script is adding a Listener for the event keyup of an element of your page and, for it to work properly, it is necessary that this Listener be bound after the HTML element has been created. Because it makes no sense to add an event to a non-existent element, right?

Almost always, in ASP.NET, the scripts are defined within a section that is at the bottom of the page, however, these scripts, are usually "rendered" by view engine before HTML - this is defined on the "master" page of layout.

An interesting way to circumvent this unwanted effect is to put the code inside $(document).ready(), to make sure that the attempt to register the event will only be made after the element has already been created. Something like:

$(document).ready(function() {
    $("#num").keyup(function (event) {
        // Seu código
    });
});

Another possible problem, also related to the "order of things", is whether the element was created dynamically, via Javascript.

In this case, it is necessary to "listen" to an body, as target (destination) the element. For example:

$('body').on('keyup', '#num', function (event) {
    // Seu código
});

Executable example of your code:

$("#num").keyup(function (event) {
  if (event.which != 13)
    return;
  var elm = $(this);
  var lines = elm.val().split("\n");
  for (var i = 0; i < lines.length; i++) {
    lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i + 1) + ". ");
  }
  
  elm.val(lines.join("\n"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="num" rows="5" cols="32">1. </textarea>

Answer 2

See the most well explained @LINQ response.

tries to put in like this

$(document).ready(function () {
$("#num").keyup(function (event) {
    if (event.which != 13)
      return;
    var elm = $(this);
    var lines = elm.val().split("\n");
    for (var i = 0; i < lines.length; i++)
      lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i + 1) + ". ");
      elm.val(lines.join("\n"));
    });
});