Uncaught TypeError: Cannot read properties of undefined (reading 'on')

Question

I am taking an Udemy course, and in this course it teaches you how to create a search box for a website in Wordpress with HTML and JS.

Here's the code written in HTML for the structure of searchbox:

<div class = "search-overlay"> 
  <div class = "search-overlay__top">
    <div class = "container">
      <i class = "fa fa-search search-overlay__icon" aria-hidden = "true"></i>
       <input type = "text" class = "search-term" placeholder = "What are you looking for?" id ="abc" > 
       <i class = "fa fa-times search-overlay__close" aria-hidden = "true"></i>
    </div>
  </div>
</div>

And this is the code written in JS:

import $ from 'jquery';
class livesearch{
constructor() {
this.searchTypingArea = $("#abc");}
events()  {
this.searchTypingArea.on("keydown", this.TypingLogic.bind(this)); }
TypingLogic() {
       setTimeout(function() {console.log("Timeout test");}, 2000);
       //clearTimeout(this.typingTimer);
       //this.typingTimer = setTimeout();
    }
    }

I mean, I understood that the code doesn't work because searchTypingArea is somehow undefined, but I take the ID from the searchbox, not sure why its not working. $ operator also works because I defined multiple other variables using class instead of ID, eg:

this.openingSearchButton = $(".js-search-trigger");
    this.closingCrossButton = $(".search-overlay__close"); 
    this.searchoverlay = $(".search-overlay"); 

These all work. Is there a problem with my way while using ID? Thank you

Answer 1

This is the way you can achieve the result

$( "#abc" ).on( "keydown", function() {
  alert( "Handler for `keydown` called." );
});