Finally, I found myself a solution and I want to share it.

<form>
<label for="username">Choose a Username:</label>
<input type="text" name="username" id="username">
<!--No more “onkeyup” attribute.-->
</form>  
<script>
  let user = document.getElementById("username");
  var regex = /[^a-z]/gi;
   
  user.addEventListener("keyup", ()=>{
  user.value = user.value.replace(regex, "");
})
  // The “user” variable has been just to simplify a lot of repeated coding, as it is equivalent to “document.getElementById(“username”).
</script>

I don‘t know if this is the best and optimal way to solve my inquire but it works. No “ONkeyup” at all, but using, instead, addEventListener ("keyup", anonymous arrow function). I‘ll really appreciate if anybody has any other suggestion.

I wanted to have a go at expanding Stevens answer (which was a massive help) So I came up with this that would work when enter was keyed on the edit task as well as the add task input. See what you think and let me know if there's a cleaner way of traversing. ```js var inputAddEdit = function(e) { // find the key pressed var key = e.code; // check if it is Enter if(key == 'Enter') { // This is maybe where it is a little messy. // We find the parentNode of the input from event.target // We are traversing out of the li from the input with parentNode again. // then finding it's id (i.e. incomplete-tasks or completed-tasks) var grandParentId = e.target.parentNode.parentNode.id; if(grandParentId == 'incomplete-tasks' || grandParentId == 'completed-tasks') { // if it does match one of the edit input fields we do some more traversing to find the edit button var editButton = e.target.parentNode.querySelector('button.edit'); // force a click to call the function editButton.click(); } else { // as the add task input grandparent has no id this will assume it is the addtask that has had enter pressed // this would not work if there were other inputs in the document. an id would have to be added addTask(); // bind enter key to new tasks bindEnterKey(); } } }; var bindEnterKey = function() { // find all text inputs var textInputs = document.querySelectorAll('input[type=text]'); // cyple over text inputs to bind enter key use for(var i = 0; i < textInputs.length; i++) { textInputs[i].addEventListener('keypress', inputAddEdit); } }; // set click handler addButton.addEventListener('click', addTask); // call bindEnterKey for existing tasks bindEnterKey(); //other remaining code.... ```

my guess is the other site's keyup event is attached to a function that actually submits the query/requests data your browser script would need to add an event listener for a value change to the same input field. Possibly "change" event. That event listener would then just execute the same request HOWEVER, i don't know if your script would have permission/access to execute the same data request

Idea is user a global variable, set it after firing event.

var is_fired = false;
addEventListener("keydown", function(e){
    if (e.keyCode === 13 && is_fired == false) {
        countup();
        random();
        is_fired = true
    }
});