How to make an font awesome (like/dislike) icon clickable with the enter key?

Question

I have a bootstrap card that contains info from an API. In my JS file, I am dynamically rendering the card into my HTML file. Right now I am trying to make an icon accessible by making it clickable with the enter key but I can't get it to work.

I tried wrapping the i tag in a button but it didn't work. I also tried wrapping it in an a tag and adding a href but that also didn't work. Does anyone have any ideas or know what to do?

In the code below you will see I added the tabindex=0 attribute which is at least allowing the user to select the i tag but doesn't help make it clickable with the enter key.

 <i id="heartBTN-${data.date}" class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3" tabindex="0" aria-label="like content" title="I like it" ><span class="likeSpan likeSpan${data.date}">Like Me</span></i >

Answer 1

You can do something like this but as the query selector is body , so it will fire up the trigger every time someone presses the Enter key in the page.

document.querySelector('body').addEventListener('keypress', function (e) 
{
    if (e.key === 'Enter') {
      // triggering the click
      $('.fa-heart').click();
    }
});

The recommended way is to bind the event listener to an input field. Like document.querySelector('#myInputField').addEventListener