Using keypress and the or function

Question

I'm tying to configure my app to click "Enter" div, when the "Enter" button on the keyboard is pressed. I already have the Enter div and it works when I click it with the mouse. I believe I need to use the keypress function with event listener and the logical OR | | operator. but I could not get it working, not even sure if I am in the correct direction, Thanks alot for the help. My code is as follows.

let display = document.getElementById("display");
let validKeys = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "0",
  "Enter",
  "Clear",
];
let pin = "";

document.getElementById("pin-pad").addEventListener("click", (event) => {
  if (!validKeys.includes(event.target.innerText)) {
    return;
  }

  if (event.target.innerText === "Enter") {
    window.electronAPI.sendPin(pin);
    return;
  }

  if (event.target.innerText === "Clear") {
    pin = display.value = "";
    return;
  }

  pin = pin + event.target.innerText;
  display.value = "*".repeat(pin.length);
});

///tests
const handlekeyUp = function (e) {
  e.stopPropagation();
  const input = document.getElementById("display");
  console.log(input, e.key, input.value);
  var reg = new RegExp("^[0-9]$");
  const number = document.querySelector(`[data-number="${e.key}"]`);

  if (reg.test(e.key)) input.value += e.key;
  if (number) number.style.backgroundColor = "#fff";
};

const handleKeyDown = (e) => {
  const number = document.querySelector(`[data-number="${e.key}"]`);
  if (!number) {
    return;
  }
  number.style.backgroundColor = "#eee";
};

document.addEventListener("keyup", handlekeyUp);

document.addEventListener("keydown", handleKeyDown);

<div id="container">
  <div id="wrapper">
    <input type="password" id="display" disabled />

    <div id="pin-pad">
      <div data-number="1">1</div>
      <div data-number="2">2</div>
      <div data-number="3">3</div>
      <div data-number="4">4</div>
      <div data-number="5">5</div>
      <div data-number="6">6</div>
      <div data-number="7">7</div>
      <div data-number="8">8</div>
      <div data-number="9">9</div>
      <div>Enter</div>
      <div data-number="0">0</div>
      <div>Clear</div>
    </div>
  </div>
</div>

Answer 1

Use event.keyCode in your handlekeyUp event handler to determine which key is pressed and if the Enter key is pressed, then send the same instruction when the word Enter is clicked:

document.getElementById("pin-pad").addEventListener("click", (event) => {
  if (event.target.innerText === "Enter") {
    //window.electronAPI.sendPin(pin);
    console.log('click Enter')
    return;
  }
})

const handlekeyUp = function (e) {
  e.stopPropagation();

  if ( 13 === e.keyCode ) { // Enter key
    //window.electronAPI.sendPin(pin);
    console.log('keypress Enter')
  }
}

document.addEventListener("keyup", handlekeyUp);

<div id="pin-pad">
  <div>Enter</div>
</div>

---

Refactoring your code and including click word "Enter" word, and keypress Enter key:

const handleKey = (event) => {
  const key = event.key || event.target.innerText;
  if (!/^([0-9]|Enter|Clear|Escape)$/.test(key)) { return; }
  handleKeyOut(event);

  const display = document.getElementById("display");

  if (key === "Enter") {
    console.log("sendPin", display.value);
    //window.electronAPI.sendPin(display.value);
    return;
  }

  if (key === "Clear" || key === "Escape") {
    pin = display.value = "";
    return;
  }

  display.value += key;
}

const handleKeyOver = (event) => {
  const key = event.key || event.target.innerText;
  const number = document.querySelector(`[data-key="${key}"]`);
  if (!number) { return; }
  number.style.backgroundColor = "#eee";
};

const handleKeyOut = (event) => {
  const key = event.key || event.target.innerText;
  const number = document.querySelector(`[data-key="${key}"]`);
  if (!number) { return; }
  number.style.backgroundColor = "#fff";
};

document.getElementById("pin-pad").addEventListener("click", handleKey);
document.addEventListener("keyup", handleKey);
document.addEventListener("keydown", handleKeyOver);
document.querySelectorAll("[data-key]").forEach((divkey) => {
  divkey.addEventListener("mouseover", handleKeyOver);
  divkey.addEventListener("mouseout", handleKeyOut);
})

<div id="container">
  <div id="wrapper">
    <input type="password" id="display" disabled />

    <div id="pin-pad">
      <div data-key="1">1</div><div data-key="2">2</div><div data-key="3">3</div>
      <div data-key="4">4</div><div data-key="5">5</div><div data-key="6">6</div>
      <div data-key="7">7</div><div data-key="8">8</div><div data-key="9">9</div>
      <div data-key="0">0</div>
      <div data-key="Enter">Enter</div><div data-key="Clear">Clear</div>
    </div>
  </div>
</div>