How to check if a key (on the keyboard) is being held down?

Question

Basically title. I need a function which works kind of like a crouch button - the character crouches only when the down arrow key is being HELD, not only pressed once. How do I make it work? Here is what I have tried but it doesn't work. Thanks in advance!!!!!

document.onkeydown = function (event) {
    let key = event.key;
    while (key ==  "ArrowDown") {
        character.style.width = 50 + "px";
        character.style.height = 30 + "px";
        character.style.top = 115 + "px";
    }
}

Answer 1

keydown event is continuously fired when you hold down any key and when you release the key, keyup event is fired.

To achieve what you are trying to do, add the styles to the character when keydown event is fired and on keyup event remove those styles from the character.

Following code snippet shows an example:

const character = document.querySelector('.character');

document.body.addEventListener('keydown', (event) => {
  character.classList.add('crouch');
});

document.body.addEventListener('keyup', (event) => {
  character.classList.remove('crouch');
});

div {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
}

.crouch {
  height: 50px;
  top: 50px;
}

<div class="character">Press any key</div>

Answer 2

I think what you might be looking for is to simply put this at the beginning of the code block within the event listener:

if (!e.repeat) return