# How to change from onclick to keydown javascript

**URL:** <https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584>\
**Category:** Card Design\
**Created:** [June 6, 2022, 8:05am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584 "2022-06-06T08:05:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![huyvanphan](https://avatars.discourse-cdn.com/v4/letter/h/c4cdca/32.png) [@huyvanphan](https://forums.ankiweb.net/u/huyvanphan)\
**Post date:** [June 6, 2022, 8:05am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/1 "2022-06-06T08:05:14Z")

</div>

Hey, could someone please help me modify this script to change it from functioning onclick but instead to function on the pressing of a specific key which I can modify?

```auto
<div id="word" style="display:none">{{Back}}</div>

<div id="reveal"></div>

<button id="hint-btn" onclick="revealNext()">Next letter</button>

<script>
var nextChar = 1
var word = document.getElementById("word").innerText

function revealNext() {
   if (nextChar <= word.length) {
      document.getElementById("reveal").innerText = word.substring(0, nextChar++)
   }
}
</script>

```

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 6, 2022, 8:07am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/2 "2022-06-06T08:07:32Z")

</div>

I would recommend reading the [appropriate documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event). If you have any specific question about it, feel free to ask.

---

<div class="post-metadata">

**Author:** ![huyvanphan](https://avatars.discourse-cdn.com/v4/letter/h/c4cdca/32.png) [@huyvanphan](https://forums.ankiweb.net/u/huyvanphan)\
**Post date:** [June 6, 2022, 8:11am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/3 "2022-06-06T08:11:48Z")

</div>

Hi thanks for the quick reply.  
I have no experience with coding  
Could you help me?

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 6, 2022, 8:42am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/4 "2022-06-06T08:42:08Z")

</div>

> [@huyvanphan](#):
>
> Could you help me?

Of course! You’ll see, it’s actually very simple.

The first difference between detecting a mouse clicking event vs keyboard key presses (in your case at least) is that mouse clicks events are bound to a particular area of the DOM, that is, if you click on the tag with the `onclick=...` attribute it will do something, but if you click somewhere else, it won’t, whereas with keyboard events, you can just detect whether the user presses a key, no matter where their mouse is (to keep it simple). This means that the event trigger will no longer be bound to a particular DOM element, so the first step is removing the `onclick=...` attribute. We won’t need that anymore:

```auto
<div id="word" style="display:none">{{Back}}</div>

<div id="reveal"></div>

<button id="hint-btn">Next letter</button>

<script>
var nextChar = 1
var word = document.getElementById("word").innerText

function revealNext() {
   if (nextChar <= word.length) {
      document.getElementById("reveal").innerText = word.substring(0, nextChar++)
   }
}
</script>

```

Now, we just need to add the wanted event listener, with

```javascript
document.addEventListener('keydown', onKey);

function onKey(e) {
    if (e.key === "a") {
        revealNext();
    }
}

```

Note that this will detect if the key pressed is `a`, but you can change to anything. If you want to detect a printable character (ie. a letter, a number or a symbol) you can just type it in the string, but if you want to detect other buttons, you have to look them up in [this table](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#special_values) to see their representation. For instance, say I want to detect when I press Enter, I search in the [whitespace section of that table](https://developer.mozilla.org/en-US/docs/W) and I find its representation is “Enter”, so I would transform my `onKey` function in

```javascript
function onKey(e) {
    if (e.key === "Enter") {
        revealNext();
    }
}

```

Or, alternatively, I could press enter in [this input box](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#result), which would print on the right what was the key representation.

Also note that this is case sensitive, pressing A with `e.key === "a"` will not work. If you don’t want it to be case sensitive, you case lowercase the key representation:

```javascript
function onKey(e) {
    if (e.key.toLowerCase() === "a") {
        revealNext();
    }
}

```

Finally, just to be clear, this is how your document would look like

```auto
<div id="word" style="display:none">{{Back}}</div>

<div id="reveal"></div>

<button id="hint-btn">Next letter</button>

<script>
var nextChar = 1
var word = document.getElementById("word").innerText

function revealNext() {
   if (nextChar <= word.length) {
      document.getElementById("reveal").innerText = word.substring(0, nextChar++)
   }
}
function onKey(e) {
    if (e.key === "a") {
        revealNext();
    }
}
document.addEventListener('keydown', onKey);
</script>

```

---

<div class="post-metadata">

**Author:** ![huyvanphan](https://avatars.discourse-cdn.com/v4/letter/h/c4cdca/32.png) [@huyvanphan](https://forums.ankiweb.net/u/huyvanphan)\
**Post date:** [June 6, 2022, 8:49am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/5 "2022-06-06T08:49:53Z")

</div>

wow thank you so much!!! cant believe it  
im terribly grateful for your detailed response  
thanks also for running me through the steps! I’m interested in learning code so ur explanations were very helpful  
your code works perfectly, its going to help my study a lot

---

<div class="post-metadata">

**Author:** ![huyvanphan](https://avatars.discourse-cdn.com/v4/letter/h/c4cdca/32.png) [@huyvanphan](https://forums.ankiweb.net/u/huyvanphan)\
**Post date:** [June 7, 2022, 12:24am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/6 "2022-06-07T00:24:11Z")

</div>

Hi blackbeans,

I’m having a issue that when I press the key function it reveals sometimes 2-3 letters or even the whole word instead of revealing the letters one by one on each key press. This only happens when studying in anki. On preview mode, the script works as intended.  
Do you have any idea how/if this can be fixed?

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 7, 2022, 5:03pm UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/7 "2022-06-07T17:03:47Z")

</div>

Unfortunately, I have very little experience with JavaScript and web development so I’m afraid I can’t help you, but maybe more competent people such as @kleinerpirat could…

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [June 7, 2022, 8:16pm UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/8 "2022-06-07T20:16:02Z")

</div>

> [@huyvanphan](#):
>
> it reveals sometimes 2-3 letters or even the whole word instead of revealing the letters one by one on each key press

That’s because there’s no guard against adding new `EventListeners` in the script. Because Anki’s reviewer webview is persistent between cards, the script adds an additional `EventListener` to the document with each new card.

Result: On the first card, it will reveal 1 letter, on the next it will reveal 2 on each keypress, then 3 and soon you’ll have a full reveal on keypress.

This should fix it:

```auto
if (!globalThis.incrementalRevealListener) {
  document.addEventListener("keydown", onKey);
  globalThis.incrementalRevealListener = true;
}

```

---

<div class="post-metadata">

**Author:** ![huyvanphan](https://avatars.discourse-cdn.com/v4/letter/h/c4cdca/32.png) [@huyvanphan](https://forums.ankiweb.net/u/huyvanphan)\
**Post date:** [June 8, 2022, 1:32am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/9 "2022-06-08T01:32:37Z")

</div>

Thanks that works perfectly 😃

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:35am UTC](https://forums.ankiweb.net/t/how-to-change-from-onclick-to-keydown-javascript/20584/10 "2023-05-01T07:35:13Z")

</div>