特定の文字を含む子要素を取得ってできますか？

Question

前提・実現したいこと

全くの初心者でタイピングゲームが作くろうとおもいたち、とりあえずキーボードっぽいやつを HTML で作成（ただ button を並べただけ）。
次に押された key と同じ button の style を変えようと思いました。

発生している問題・エラーメッセージ

押された key と同じ文字の button を取得する方法がわかりません。

該当のソースコード

                        <div class="button-list">
                        <button type="button" class="btn btn-outline-light mt-3">1</button>
                        <button type="button" class="btn btn-outline-light mt-3">2</button>
                        <button type="button" class="btn btn-outline-light mt-3">3</button>
                        <button type="button" class="btn btn-outline-light mt-3">4</button>
                        <button type="button" class="btn btn-outline-light mt-3">5</button>
                        <button type="button" class="btn btn-outline-light mt-3">6</button>
                        <button type="button" class="btn btn-outline-light mt-3">7</button>
                        <button type="button" class="btn btn-outline-light mt-3">8</button>
                        <button type="button" class="btn btn-outline-light mt-3">9</button>
                        <button type="button" class="btn btn-outline-light mt-3">0</button>
                        <button type="button" class="btn btn-outline-light mt-3">-</button>
                        <button type="button" class="btn btn-outline-light mt-3">^</button>
                        <button type="button" class="btn btn-outline-light mt-3">\</button>
                        <button type="button" class="btn btn-outline-light mt-3">Q</button>
                        <button type="button" class="btn btn-outline-light mt-3">W</button>
                        <button type="button" class="btn btn-outline-light mt-3">E</button>
                        <button type="button" class="btn btn-outline-light mt-3">R</button>
                        <button type="button" class="btn btn-outline-light mt-3">T</button>
                        <button type="button" class="btn btn-outline-light mt-3">Y</button>
                        <button type="button" class="btn btn-outline-light mt-3">U</button>
                        <button type="button" class="btn btn-outline-light mt-3">I</button>
                        <button type="button" class="btn btn-outline-light mt-3">O</button>
                        <button type="button" class="btn btn-outline-light mt-3">P</button>
                        <button type="button" class="btn btn-outline-light mt-3">@</button>
                        <button type="button" class="btn btn-outline-light mt-3">[</button>
                        <button type="button" class="btn btn-outline-light mt-3">A</button>
                        <button type="button" class="btn btn-outline-light mt-3">S</button>
                        <button type="button" class="btn btn-outline-light mt-3">D</button>
                        <button type="button" class="btn btn-outline-light mt-3">F</button>
                        <button type="button" class="btn btn-outline-light mt-3">G</button>
                        <button type="button" class="btn btn-outline-light mt-3">H</button>
                        <button type="button" class="btn btn-outline-light mt-3">J</button>
                        <button type="button" class="btn btn-outline-light mt-3">K</button>
                        <button type="button" class="btn btn-outline-light mt-3">L</button>
                        <button type="button" class="btn btn-outline-light mt-3">;</button>
                        <button type="button" class="btn btn-outline-light mt-3">:</button>
                        <button type="button" class="btn btn-outline-light mt-3">]</button>
                        <button type="button" class="btn btn-outline-light mt-3">Z</button>
                        <button type="button" class="btn btn-outline-light mt-3">X</button>
                        <button type="button" class="btn btn-outline-light mt-3">C</button>
                        <button type="button" class="btn btn-outline-light mt-3">V</button>
                        <button type="button" class="btn btn-outline-light mt-3">B</button>
                        <button type="button" class="btn btn-outline-light mt-3">N</button>
                        <button type="button" class="btn btn-outline-light mt-3">M</button>
                        <button type="button" class="btn btn-outline-light mt-3">,</button>
                        <button type="button" class="btn btn-outline-light mt-3">.</button>
                        <button type="button" class="btn btn-outline-light mt-3">/</button>
                        <button type="button" class="btn btn-outline-light mt-3">\</button>
                        </div>

Comments

[yambejp]

「押された key」というのは本物のキーボードで押したキーということですかね？

[Kudzu]

yambejp さん、おっしゃる通りです。本物のキーボードで押したキーのことを指しています。
わかりにくく申し訳ございません。

Answer 1

$(document).on('keypress', function(e){ alert(e.keyCode) })

キーボードのキーを押すと、そのキーに対応するコードがアラートされるコードです。
jQueryが使えるページのデベロッパーツールで実行し、その後キーボードを押してみてください。

このようにキーにはそれぞれコードが割り振られているので、そのコードをそれぞれの button の id 等で持たせておけば容易に押された key と同じ button の取得ができますので、それで style を変えることもできると思います。

Comments

[Kudzu]

Mugheart さん、keyCodeというプロパティがあるとは目から鱗です。
これから試してみようと思います。ありがとうございました。