Discover which on-screen key was tapped

I'm building an Enigma simulation hype project where the screen shows 26 typewriter keys. I need to run a JS function whose action varies according to which key is tapped. It seems very inefficient to create 26 very similar functions. I feel sure I'm missing something simple. Can't I create a single function that is triggered when any of the keys is tapped, BUT which knows or can determine which key was tapped?

It's amazing how sometimes simply posing a question in a forum makes you think of a solution to your problem!
All I have to do is, in the keyPressed(hypeDocument, element, event) function, access the element.innerHTML to get the letter under the cursor when the image of the key is clicked. That's it! Stupidly easy.

4 Likes

I personally would give each key an id.

And then use element.id which will give you which key is the calling element.

Rather than use what's in the innerHTML, not say I have not done this :grinning: but using an ID instead gives you room to chop and change the character displayed by the innHTML without changing the identity of the button or your code at a later stage.

1 Like