title: How to register keystrokes on a image tag?
body: <p>I am making a clicker game that has keystroke and click function. I was not able to add the keystroke function. I have been using jQuery to code my clicker game.  </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>var numClicks = 0;
  
  $("#results").text("Money earned $" + numClicks);
  
  $("img").on('click', function()
  
    {
      numClicks++;
      $("#results").text("Money earned $" + numClicks);
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="results"&gt;&lt;/div&gt;
   
      &lt;img src="https://www.w3schools.com/html/img_girl.jpg" width="500" height="600"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expected my code would receive my keyboard inputs as clicks without actually having to click. I've checked for several different pieces of code which could potentially work but with no luck. The results of my code are literally nothing. Nothing happens.</p>