title: Using keypress and the or function
body: <p>I'm tying to configure my app to click &quot;Enter&quot; div, when the &quot;Enter&quot; 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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
    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) =&gt; {
    const number = document.querySelector(`[data-number="${e.key}"]`);
    if (!number) {
      return;
    }
    number.style.backgroundColor = "#eee";
  };
  
  document.addEventListener("keyup", handlekeyUp);
  
  document.addEventListener("keydown", handleKeyDown);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="wrapper"&gt;
      &lt;input type="password" id="display" disabled /&gt;
  
      &lt;div id="pin-pad"&gt;
        &lt;div data-number="1"&gt;1&lt;/div&gt;
        &lt;div data-number="2"&gt;2&lt;/div&gt;
        &lt;div data-number="3"&gt;3&lt;/div&gt;
        &lt;div data-number="4"&gt;4&lt;/div&gt;
        &lt;div data-number="5"&gt;5&lt;/div&gt;
        &lt;div data-number="6"&gt;6&lt;/div&gt;
        &lt;div data-number="7"&gt;7&lt;/div&gt;
        &lt;div data-number="8"&gt;8&lt;/div&gt;
        &lt;div data-number="9"&gt;9&lt;/div&gt;
        &lt;div&gt;Enter&lt;/div&gt;
        &lt;div data-number="0"&gt;0&lt;/div&gt;
        &lt;div&gt;Clear&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>