【JS】キーを押した時のスタイルを変更したい

イベントを利用して、ブラウザの画面上で特定のキーボードを押すと音が鳴るピアノを作っています。
キーコードと音源ファイルを結び付け、特定のキーを押すと音が鳴るようにはなりました。

これに、特定のキーを押した時にそのキーの縁が赤く表示されるようにスタイルを変更したいです。

○○.classList.add('class名');を使うのかと推測していますが、どの部分にこれを書けばいいか、ご教示お願いいたします。

反映したいスタイル↓

CSS
1.playing {
2  transform: scale(1.1);
3  border-color: red;
4  box-shadow: 0 0 1rem red;
5}

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="styles.css">
6</head>
7<body>
8  <div class="keys">
9    <div data-key="65" class="key">
10      <kbd>A</kbd>
11      <span class="sound">ド</span>
12    </div>
13    <div data-key="83" class="key">
14      <kbd>S</kbd>
15      <span class="sound">レ</span>
16    </div>
17    <div data-key="68" class="key">
18      <kbd>D</kbd>
19      <span class="sound">ミ</span>
20    </div>
21    <div data-key="70" class="key">
22      <kbd>F</kbd>
23      <span class="sound">ファ</span>
24    </div>
25    <div data-key="71" class="key">
26      <kbd>G</kbd>
27      <span class="sound">ソ</span>
28    </div>
29    <div data-key="72" class="key">
30      <kbd>H</kbd>
31      <span class="sound">ラ</span>
32    </div>
33    <div data-key="74" class="key">
34      <kbd>J</kbd>
35      <span class="sound">シ</span>
36    </div>
37  </div>
38
39  <audio data-key="65" src="sounds/do.wav"></audio>
40  <audio data-key="83" src="sounds/re.wav"></audio>
41  <audio data-key="68" src="sounds/mi.wav"></audio>
42  <audio data-key="70" src="sounds/fa.wav"></audio>
43  <audio data-key="71" src="sounds/so.wav"></audio>
44  <audio data-key="72" src="sounds/ra.wav"></audio>
45  <audio data-key="74" src="sounds/si.wav"></audio>
46
47
48<script type="text/javascript" async="" src="main.js"></script>
49
50</body>
51</html>
52

JavaScript
1    function getKeyCode(e){
2      const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
3    }
4
5    function playSound(e){
6      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
7      if (!audio) return; // functionを中止
8      audio.currentTime = 0; // 最初に戻る
9      audio.play();
10    }
11　　
12    // keyを叩くイベントに対してplaySound関数を実行する
13    window.addEventListener('keydown', playSound);

行動規範の内容に同意します

回答1件

ベストアンサー

順番的に，音を鳴らす処理の後に書いた方が良いと思います
playSound()の最後に書くのが安全ですかね

ただ，IEはバグがけっこう残ってる（partial support）みたいなので，
もしIE対応するなら，setAttributeの方が良いかもしれません
https://caniuse.com/#search=classList

もし，element.classList.add('class');するなら，
音を鳴らし終わったときに，element.classList.remove('class');するのも忘れずに

.toggle()がjQueryと同じ挙動（cssの:activeや:hoverと同じ）らしいので，
もしかしたら，.toggle()の方が使いやすいかも

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass()

投稿2018/08/18 16:53

liveasnotes

総合スコア1284

nicosan

2018/08/18 17:17

早速のご回答ありがとうございます。 `div.classList.add('class');` と `div.classList.remove('class');` を教えて頂いた箇所に書いたのですが、スタイルが反映されませんでした。今回のケースでは、divタグの周縁を赤く変えたいのですが、elementをdivにすることに間違いはないでしょうか？間違いないようであれば、何が原因でスタイルが反映されないのか・・・お手数ですがアドバイス頂けると嬉しいです。よろしくお願いいたします。

m.ts10806

2018/08/18 21:28 編集

ブラウザ開発ツールの、GoogleChromeであれば「Elements」にて対象DOMの動きを見てみてください。想定通りのclassが追加されていればそのclassの指定が正しくないからですし、追加されていなければそもそもその処理を通っていないことが考えられます。通っているかどうかは該当箇所の処理の前後などにconsole.log("a")などと任意の文字をコンソール出力して確認すると良いです。

liveasnotes

2018/08/19 14:06

> `div.classList.add('class');` と `div.classList.remove('class');` を教えて頂いた箇所に書いたのですが、スタイルが反映されませんでした。変数名がdivならそれで大丈夫ですが，たぶん，e.keyCodeをつかってどのdivのクラスを編集するのか指定する必要があるのでは？あと，addの直後に何の前触れもなくremove書いちゃうと，人間が認識できるかできないかレベルの短時間しか赤枠が表示されないような気がするので，もし2つ連続で書いていた場合は修正してください修正したコードは質問欄に反映したり，jsFiddleなどのオンラインエディタで共有してもらえると確認作業が捗ります．（エディタを開くのがめんどくさくて放置しちゃうこともしばしばあるので...）

nicosan

2018/08/21 10:26

> mts10806さんコメント頂きありがとうございます。処理が通っているかどうか、そのやり方で確認することができました。 > liveAsNotesさんご指摘頂いたところを直して、無事作りたかったものを完成させることができました。ありがとうございました！

行動規範の内容に同意します