How to add trigger key to my javascript project

Question

How can I add trigger key to my button when I add something to input area?

My code:

let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i++) {
    text += "<li>" + animals[i] + "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList + text + closeList;
}

<input id="enter" />
<button onclick="add()">Submit</button>

Answer 1

To add event listener on keyboard's events you can use the keydown event and then filter the events based on the keyCodes

Here an example working when pressing enter:

let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i++) {
    text += "<li>" + animals[i] + "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList + text + closeList;
}

function keyCallback(event) {
  if(event.key === "Enter") {
    add();
  }
}

addEventListener("keydown", keyCallback);

<input id="enter" />
<button onclick="add()">Submit</button>

<div id="demo"></div>