How can I detect if backspace is pressed on the site?

I am currently making a simple online text editor site. And I cannot detect backspace being pressed. Here is the code: HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="cssfile/style.css">
    <title> Code Editor </title>
    <script src="jsfile/main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="navdiv"></div>
    <div id="board" class="board">

    </div>
</body>

</html>

js: This is my main code:

document.addEventListener("keypress", function (event) {
    console.log(event.key)
    if (event.key == "Enter") {
        document.getElementById("board").innerText += 'n'
    } else {
        document.getElementById("board").innerText += event.key
    }
});

This is my code and I tried

if(event.key == "Backspace")

But that didn’t work.

Answer

You are close.

You are using keypress when you should be using keyup (or keydown if you want to know before the key press is complete).

KeyPress event is invoked only for character (printable) keys, KeyUp and KeyDown events is raised for all including non-printable such as Control, Shift, Alt, BackSpace, etc.

Try this:

document.addEventListener("keyup", function(event) {
  console.log(event.key);
  if (event.key === "Backspace") {
    document.getElementById("board").innerText += 'n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});