Regular expression error: "Range out of order in character class"

The error " Range out of order in character class " means that, within the character class , there is a range upside down. In a character class you can use any range, for example [!-z], [#-@]or whatever you want, as long as the first has a character value less than the second.
_{-We usually talk about ASCII code because the basic Latin block is the one we use the most, but it also goes for any code point value in Unicode, not just the most common ones between 0 and 127.}

There are 3 reasons why the error can be generated:

1. You wanted to include a -, but it was not escaped.
   ^{Example: when you want to match one of these symbols [,-!"#], the hyphen has to be escaped so as not to generate a range, like [,\-!"#](or be at the beginning or end of the class, where it is never a range).}
2. You're using square brackets, but you don't want to have a character class.
   ^{Example: to match the text "[ax - b]", the leading bracket must be escaped so that it does not generate a class, such as \[ax - b].}
3. Exclusively a backwards range, usually due to a capitalization error, as in the case of [a-Z].

In your case, a-Zit's wrong, because la ahas the value 97 and la has Zthe value 90 (it's backwards). Instead, it could be [Z-a], which includes the characters Z, [, \, ], ^, _, `and a.
_{- I know, it was probably just a typo but I wanted to explain it.}

The regex that matches a letter from a to z in uppercase or lowercase is /^[A-Za-z]$/.
Or, what is the same (if we use the switch /ito ignore case):
/^[a-z]$/i

But let's not forget the ñ and the accented vowels in Spanish:

/^[a-záéíóúüñ]$/i

Side note: Validating on the keypress event is a thing of the past .
It is not recommended, it is no longer used, for two main reasons:

1. Currently, many text inputs are not with keys. Cell phones don't have keys, or when you copy and paste text you're not sending a key either... and neither of these fire a keypress event.
   _{-Do the test, open this page on your cell phone and you will see that the code of your question does not trigger the event and, therefore, does not show the error.}

2. And it is no longer customary to prohibit the entry of anything. Do you remember any professional page that prevents you from entering a character? On the contrary, what is usually done is to allow everything, and mark in some color or show a small message when it is incorrect. Furthermore, it is usually not checked while typing, but rather when focus is lost or when the form is submitted.

An easy alternative (especially seeing as you're already defining the doctype as HTML5) is to use the pattern attribute of the inputs. It involves changing the textarea to an input, but since you're not allowing spaces or line breaks, it would seem logical... and bye code!

input[type=text] {
    width: 40ch;
}
input:invalid {
    border: 2px solid red;
}

<form action="https://isstatic.aoverflow.com/YQUj9m.jpg">
  <input type="text"
         placeholder="Ingrese el texto"
         pattern="[a-záéíóúüñA-ZÁÉÍÓÚÜÑ]*"
         title="Sólo letras de la 'a' a la 'z'"
  >
  <br>
  <input type="submit"
         value="Probar"
  >
</form>

• It is currently supported by most modern browsers (IE10+)
  ( see compatibility ).

But if you're interested in seeing how to validate a textarea, I recommend reading Form Data Validation (MDN) .

Or, if the idea is really to have control of each of the changes, the events to take into account are: submit , blur and input .

The regex error is because you included the in the characters AZ and aZ and there is no character range aZ but az .

Also as I see the code, you must use event.key

Modified code:

window.addEventListener("DOMContentLoaded",checker);


function checker(){
 var textArea = document.getElementsByTagName("textarea");
 for (let element of textArea) {
  element.addEventListener("keypress", event => {
  var letra = event.key,
      patron = /[A-Z]/ig;
  if(!patron.test(letra)) {
    event.preventDefault();
    return false;
  }  
  });
 }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea cols="40" rows="10"></textarea></textarea>
</body>
</html>