data属性を使って表示させるdiv要素の状態を変更させる方法

Question

非表示だったdiv要素の表示をさせたいです。

※data属性の活用方法を調べているのであえて直接IDを指定せずにdata属性を使います。

<button data-id="typeB" onclick="click()">ここをクリックするとBが表示される</button>

<div id="typeB" style="display: none;">Bが表示された</div>

  function click(){
    var tb = document.querySelector('[data-id]');
    document.getElementById(tb.dataset.id).style.display = "block";
  }

ボタンクリック→クリックした要素のdata属性を変数にする→その変数を使ってIDを特定→特定した要素が表示される
という流れを実現したいのですが何故上記のコードでは何も表示されないのでしょうか。

Answer 1

<button data-id="typeB" onclick="click()">

click という関数名を別のものに変えてみてください。

イベントハンドラ中では this がスコープとして追加されるため、click() と書くと HTMLElement の click() が選ばれてしまいます。

---

onclick 属性などのイベントハンドラ実行中は、シンボルは以下の順番で検索されます。

1. イベントが起きた要素のプロパティやメソッド
2. その所有 <form> のプロパティやメソッド
3. document のプロパティやメソッド
4. グローバル変数やグローバル関数

addEventListener() で登録したイベントリスナにはそういうややこしいスコープはありませんので、addEventListener() のほうがトラブルが少なくなります。

Comments

[_L9u7c4i0a]

解説ありがとうございます
addEventListener()を使ってみます

Answer 2

clickという関数名を変更してください

参考

<script>
document.addEventListener('click', e=>{
  const t=e.target;
  if(t.matches('[data-id]')){
    document.querySelector(`#${t.dataset.id}`).style.display=null;
  }

});
</script>
<button data-id="typeB">ここをクリックするとBが表示される</button>
<div id="typeB" style="display: none;">Bが表示された</div>

Comments

[_L9u7c4i0a]

コードありがとうございます！
使わせていただきます