XTerm JS: allowing user input/making commands (in html/js)

Ive been checking out a few HTML/JS/CSS terminals I could use for my site and I came across XTerm.js. I decided to try it out, but I’m a little confused, after plugging in some code I found from a site (forgot the name), I had the terminal loaded, but my main problem is: I don’t know how to add commands, or have user input in general. I added a snippet of the terminal below, and if you try to type in it, nothing will happen, no keys are being registered.

I tried taking a look at a few questions here/sites, but none seem to help me, my knowledge is pretty low though when it comes to JS and HTML so it could also be that. I also checked the XTerm docs, but to be honest, it’s a little confusing for me. Could somebody please help me out here? Id like to know how to make commands for the terminal, and allow user input.

Here is my current code right now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XTerm terminalr</title>
  <link href="https://unpkg.com/xterm/css/xterm.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.js"></script>
</head>
<body>
    
 <div id="terminal"></div>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/meslo.min.css" rel="stylesheet">
 
<style>

#terminal {
 width: 37%;
 font-size: 20px;
 font-family: meslo;
}

</style>

<script>
 
const term = new Terminal();
const shellprompt = 'root@XTerm:~# ';

function termKeyPress(ev) {
  term.on('key', (key, ev) => {
        console.log(key.charCodeAt(0));
        if (key.charCodeAt(0) == 13)
            term.write('n');
        term.write(key);
});
}

term.open(document.getElementById('terminal'));
term.prompt = function () {
  term.write('r' + shellprompt);
};

term.writeln('AT: localHostn');
term.prompt();

 </script>
</body>
</html>