JavaScriptで選択項目名を取得する際、隙間をクリックした時に null を取得してしまう

Question

前提

ページごとに選択肢から一つを選んでいくと
最終ページで分析結果を表示する
診断サイトを作ってみようと思います。

Javascriptは勉強しはじめたばかりで
いろいろな参考サイトを読んで
試行錯誤しているところです。

getElementById と addEventListener で
選択された項目名を取得しようと思うのですが
id で囲われた内側をクリックイベントの対象にしてしまうと
項目の隙間をクリックしたときに null が取得されてしまいます。

null の時は次のページへ飛ばないのでいいか
とも思ったのですが
ブラウザの進む戻るを使われると
null のまま次のページへ行けてしまいます。

CSSで隙間なく項目を並べたらよい気もしますが
ページデザインの選択肢が狭まるのも嫌なので
なんとかならないかと思っています。

JavaScript で
複数の選択肢（a要素やbutton要素）から一つを選んだときに
その項目名を取得する、という
よく使う手法がありましたら
教えていただけないでしょうか。

実現したいこと

• 項目をクリックしたときだけ属性を取得したい

該当のソースコード

<div id="question">
  <a data-no="No001" href="index2.html">
    <span data-no="No001">No001</span>
    <img src="img/pic001.jpg" alt="" data-no="No001" />
  </a>
  <a data-no="No002" href="index2.html">
    <span data-no="No002">No002</span>
    <img src="img/pic002.jpg" alt="" data-no="No002" />
  </a>
  <a data-no="No003" href="index2.html">
    <span data-no="No003">No003</span>
    <img src="img/pic003.jpg" alt="" data-no="No003" />
  </a>
</div>

<script>
  'use strict';
  const selected = document.getElementById('question');
  selected.addEventListener('click', number, false);
  function number(event) {
    let target = event.target;
    sessionStorage.setItem('question01', target.getAttribute('data-no'));
  }
</script>

Answer 1

問題点

• クリックの対象は<div id="question">ではなく、<a>だと思います。
  • 3つのaタグそれぞれに.addEventListener()でイベントリスナーをつけましょう。
• 同じdata-noを何回も書くのはやめましょう。
  • 🔺 event.target → 実際にクリックした要素
  • ✅ event.currentTarget → イベントリスナーを設定している要素
  • つまり、currentTargetを使えば、何回も同じdata-noを書く必要がなくなります。どの要素が実際にクリックされたとしても、必ずイベントリスナーを設定したaタグを指定できるからです。
  • すなわち、隙間をクリックしてnullになってしまうという現象も起きません。

完成コード例

<div id="question">
  <a data-no="No001" href="index2.html">
    <span>No001</span>
    <img src="https://placehold.jp/150x150.png" alt="" />
  </a>
  <a data-no="No002" href="index2.html">
    <span>No002</span>
    <img src="https://placehold.jp/150x150.png" alt="" />
  </a>
  <a data-no="No003" href="index2.html">
    <span>No003</span>
    <img src="https://placehold.jp/150x150.png" alt=""" />
  </a>
</div>

const aTags = document.querySelectorAll('#question a');
aTags.forEach(a => a.addEventListener('click', saveNumberinSessionStrage, false));

function saveNumberinSessionStrage(event) {
  const number = event.currentTarget.getAttribute('data-no');
  sessionStorage.setItem('question01', number);
}

Comments

[donuts11]

スマートなやり方を教えていただき、ありがとうございます。
addEventListener の解説ページを見ても
複数の要素にというのが分かってませんでした。
event.currentTarget なども詳しく説明していただき助かります。
うまく動くようになりました。

まだ切り貼りの域を出ないのですが
今後も勉強していきたいと思います。
また分からないところが出てきた時はよろしくお願いします。

Answer 2

条件を満たさないときはsessionStorageに書き込まないのがいいんじゃないでしょうか。

    if (target.hasAttribute('data-no'))
        sessionStorage.setItem('question01', target.getAttribute('data-no'));

Comments

[donuts11]

Javascriptを始めたばかりで
このような if 文の条件式が書けるということを知りませんでした。

別の方のやり方がスマートなのかもということで
今回は使いませんでしたが
この if 文の型は覚えておこうと思います！

ありがとうございました。