I'm trying to make a "real-time" combat game that is based on button presses to initiate combat. Sorry if the title in confusing. Maybe the following code will help to illustrate my problem.
My main passage with divs containing variables (which are actually widgets that contain buttons):
<<set $Ability1 to "<<Attack>>">>\
<<set $Ability2 to "<<Fireball>>">>\
<<set $Ability3 to "<<Heal>>">>\
<div id="Ability1"><<print $Ability1>></div>
<div id="Ability2"><<print $Ability2>></div>
<div id="Ability5"><<print $Ability5>></div>
An example of my "Fireball" widget:
<<replace "#combatlog">>You cast a Fireball!<</replace>>
<<set $enemy.hp -= 100>> //just an example
So basically, I'm trying to trigger these "spell buttons" by keybinding them to the keyboard keys of "1", "2", and "3" respectively. The problem is, I have no idea how to do that. And on top of that, as the game progresses, I want the player to be able to replace or switch around $Ability1, $Ability2, or $Ability3 with other new abilities (all of which are widgets containing buttons that execute various effects), hence why I chose to use variables that when printed are widgets containing buttons. Button 1 must ALWAYS trigger ability1, Button 2 must ALWAYS trigger ability2 etc.
TLDR: How do I click a button inside an element (a div with an id) using a keypress on a keyboard.