javascriptのクリックイベントで要素を取得したい

Question

ピアノの鍵盤をクリックすると、そのクリックした鍵盤の要素を取得出来るようにしたいです。

<div class="piano_block flex">
    <div class="key_block base">
        <div class="key white_key"></div>
        <div class="key black_key on_key"></div>
    </div>
    <div class="key_block base">
        <div class="key white_key"></div>
        <div class="key black_key on_key"></div>
    </div>
    <div class="key white_key"></div>
    <div class="key_block base">
        <div class="key white_key"></div>
        <div class="key black_key on_key"></div>
    </div>
    <div class="key_block base">
        <div class="key white_key"></div>
        <div class="key black_key on_key"></div>
    </div>
    <div class="key_block base">
        <div class="key white_key"></div>
        <div class="key black_key on_key"></div>
    </div>
    <div class="key white_key"></div>
</div>

 body,
 html{
     padding: 0;
     margin: 0;
 }

 .flex
 {
     display: flex;
 }
 .white_key{
    border: 1px solid black;
    width: 28px;
    height: 150px;
 }
 .black_key{
    background-color: black;
    overflow: hidden;
    width: 20px;
    height: 100px;
 }
 .base{
     position: relative;
     width: 28px;
     height: 150px;
 }
 .on_key{
     position: absolute;
     left: 68%;
     top:0;
 }

 function select_key(e) {
        target_key = e.target
        console.log(target_key)
    }
    const keys = document.querySelectorAll('.key')
    keys.forEach(key => {
        key.addEventListener("click", select_key);
    });

これでやると、黒鍵を選んだ時に下の白鍵が選ばれてしまう事が多々あります、どうしたら黒鍵、白鍵を区別してしっかりと取得出来るでしょうか？

Answer 1

鍵盤をすべて並列にもってみては？

追記

• codepen kenban

Comments

[tsu56569]

すべて横並びということでしょうか？ピアノの見た目は維持したいのですが…

[yambejp]

追記しました

[tsu56569]

ありがとうございます、この方法でいけそうです！

[mkk]

tsu56569さん、質問に便乗失礼致します。
不適切であれば削除させていただきます。

yambejpさん
他の方の質問に便乗で大変申し訳ないのですが、後学のためお伺いできるでしょうか。
codepenに載せていただいている
.b:nth-child(2)
の部分ですが、私の中では「b」classが付いている要素の2番目という認識でした。
この記述で鍵盤全体の2番目と指定できるのはどういう解釈なのでしょうか。

[yambejp]

nth-childはHTML要素群内での順番です。
.b:nth-child(2)とは
「bクラス要素の中の2番目」という意味ではなく
「2番目の要素の中のbクラスがついているもの」という意味です
今回は他の要素がないですが、沢山要素があるときに排他的処理を
する場合には楽です

[mkk]

ありがとうございます！
大変勉強になりました。

Answer 2

keyが共通でクラス付与されているので、document.getElementsByClassName()で取得して、
forEachで各要素に対してクリックイベントを設定すれば良いと思います。

質問者様のHTML, CSSを使用してサンプルコードを作成しましたので、ご確認ください。

CodePenサンプル