html js カレンダー テーブル内でポップアップメニューを表示する方法

Question

前提・実現したいこと

お世話になります。コーディング勉強中の初心者です。
予約システムを作成中です。

テーブルでカレンダーを作成し、日付をクリックすると
ポップアップで時間が表示される。時間を選んで送信する。という機能を作ろうとしています。

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

画像ですと、カレンダーの外部の「３」をクリックすると、時間のポップアップが表示されるようになっています。
まったく同じものを、カレンダーの内部の「３」に付けたいのですが、クリックしても反応がありません。

該当のソースコード

付けたい機能
<div class="dropdown">
  <button class="dropdown__btn" id="dropdown__btn">３</button>
  <div class="dropdown__body">
    <ul class="dropdown__list">
      <li class="dropdown__item"><a class="dropdown__item-link">8:00</a></li>
      <li class="dropdown__item"><a class="dropdown__item-link">10:00</a></li>
      <li class="dropdown__item"><a class="dropdown__item-link">12:00</a></li>
    </ul>
  </div>
</div>


カレンダーのtd内に入れると反応しない
<td>
<div class="vmenu_off">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">３</div>
					<div class="dropdown">
  <button class="dropdown__btn" id="dropdown__btn"></button>
  <div class="dropdown__body">
    <ul class="dropdown__list">
      <li class="dropdown__item"><a class="dropdown__item-link">8:00</a></li>
      <li class="dropdown__item"><a class="dropdown__item-link">10:00</a></li>
      <li class="dropdown__item"><a class="dropdown__item-link">12:00</a></li>
    </ul>
  </div>
</div>
</div>
</td>

付けたい機能
.dropdown {
  margin: 0 0 0 auto;
  position: relative;
}
.dropdown__btn {
  display: block;
  width: 1.5em;
  padding: 0.2em;
  background: none;
  border: 0;
}
.dropdown__btn.is-open::after {
  content: "";
  width: 100%;
  height: 100%;
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.dropdown__btn.is-open + .dropdown__body {
  display: block;
  z-index: 5;
}
.dropdown__body {
  display: none;
  width: 250px;
  background: #fff;
  box-shadow: 0 2px 6px 2px rgba(60,64,67,0.149), 0 1px 2px 0 rgba(60,64,67,0.302);
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  top: 32px;
  left: 0;
}
.dropdown__list {
  margin: 0;
  padding: 0;
}
.dropdown__item {
  display: block;
}
.dropdown__item-link {
  display: block;
  padding: 1em 1.2em;
  font-size: 0.95em;
  text-decoration: none;
  color: #444;
}
.dropdown__item-link:hover {
  background: #CCFFFB;
}

(function () {
  document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('dropdown__btn');
    if(btn) {
      btn.addEventListener('click', function(){
        this.classList.toggle('is-open');
      });
    }
  });
}());

補足情報（FW/ツールのバージョンなど）

カレンダー参考
https://nyanblog2222.com/demo/calender1/
ドロップダウンメニュー参考
https://pixelog.net/post/rb8orj/

Comments

[m.ts10806]

html全体提示してください。
一部だけでは本質問題が見えません

Answer 1

直接の回答じゃなくて申し訳ないのですが、フレームワークを使うというのも一考です。

vue/vuetifyを使えば、POPアップも簡単に実装可能です。
また、表示内容の切り替えなんかも非常に簡単です。

v-dialog
//POPアップの参考例です。
htmlで読み込むだけも使えます。

Answer 2

m.ts10806 さんのおっしゃる通りですね。
(↓日付クリックで開くだけの突貫コード)

const menuitems = document.getElementsByClassName('vmenuitem');

for (let i=0, len=menuitems.length; i<len; i=i+1) {
	menuitems[i].addEventListener('click', function() {
		this.nextElementSibling.getElementsByClassName('dropdown__btn')[0].classList.toggle('is-open');
	});
}

Comments

[mikage126]

ご回答ありがとうございます！
2点ご質問なのですが、
・突貫コードを　違う日付をクリックするたびに別のメニューを開かせるようにするにはどうすれば良いでしょうか？
(現状一度開いたら、別の日付を選択できません、、)

・querySelectorAllを使ってclass指定するやり方を試してみようとしましたが、記述が間違っているのか反応しませんでした。ご確認いただけますでしょうか
、、、
(function () {
document.addEventListener('DOMContentLoaded', function() {
const btn = document.querySelectorAll('.dropdown__btn');
if(btn) {
btn.addEventListener('click', function(){
this.classList.toggle('is-open');
});
}
});
}());
、、、

[takna]

メニューが開いた時、次の日付がクリックできないのは、CSS で最前面に .dropdown__btn.is-open::after が全面レイヤーとして出てるからです。(ブラウザの開発ツールで確認してみてください)

m.ts10806 さんの回答通り、querySelectorAll()で取得するのはリストなので、ループで処理する必要があります。補足ですが、カレンダー群を囲む要素にIDを付けるなりして検索するエリアを限定した方が良いです。あと、返り値が複数になるものは変数もそうと分かるようにしとく方が後々わかりやすいです。

```javascript
const calendarArea = document.getElementById('calendar-area'),
btns = calendarArea.querySelectorAll('.dropdown__btn');
```

Answer 3

html全体提示されてないので推測にしかなりませんが、
もし、全てのtdに同じものを設置しているのでしたらidは重複不可という構文上のNGが原因です。
複数要素に同じイベントを振りたいのでしたら、querySelectorAllなどでクラスなどを指定して要素一覧を取得しループしてそれぞれに付与してください。
まずはそこから。

Comments

[m.ts10806]

いや、合ってるか？