質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

2244閲覧

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

mikage126

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/05/13 05:07

前提・実現したいこと

イメージ説明

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

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

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

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

該当のソースコード

html

1付けたい機能 2<div class="dropdown"> 3 <button class="dropdown__btn" id="dropdown__btn"></button> 4 <div class="dropdown__body"> 5 <ul class="dropdown__list"> 6 <li class="dropdown__item"><a class="dropdown__item-link">8:00</a></li> 7 <li class="dropdown__item"><a class="dropdown__item-link">10:00</a></li> 8 <li class="dropdown__item"><a class="dropdown__item-link">12:00</a></li> 9 </ul> 10 </div> 11</div> 12 13 14カレンダーのtd内に入れると反応しない 15<td> 16<div class="vmenu_off"> 17 <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')"></div> 18 <div class="dropdown"> 19 <button class="dropdown__btn" id="dropdown__btn"></button> 20 <div class="dropdown__body"> 21 <ul class="dropdown__list"> 22 <li class="dropdown__item"><a class="dropdown__item-link">8:00</a></li> 23 <li class="dropdown__item"><a class="dropdown__item-link">10:00</a></li> 24 <li class="dropdown__item"><a class="dropdown__item-link">12:00</a></li> 25 </ul> 26 </div> 27</div> 28</div> 29</td> 30 31

css

1付けたい機能 2.dropdown { 3 margin: 0 0 0 auto; 4 position: relative; 5} 6.dropdown__btn { 7 display: block; 8 width: 1.5em; 9 padding: 0.2em; 10 background: none; 11 border: 0; 12} 13.dropdown__btn.is-open::after { 14 content: ""; 15 width: 100%; 16 height: 100%; 17 cursor: default; 18 position: fixed; 19 top: 0; 20 left: 0; 21 z-index: 4; 22} 23.dropdown__btn.is-open + .dropdown__body { 24 display: block; 25 z-index: 5; 26} 27.dropdown__body { 28 display: none; 29 width: 250px; 30 background: #fff; 31 box-shadow: 0 2px 6px 2px rgba(60,64,67,0.149), 0 1px 2px 0 rgba(60,64,67,0.302); 32 border-radius: 4px; 33 overflow: hidden; 34 position: absolute; 35 top: 32px; 36 left: 0; 37} 38.dropdown__list { 39 margin: 0; 40 padding: 0; 41} 42.dropdown__item { 43 display: block; 44} 45.dropdown__item-link { 46 display: block; 47 padding: 1em 1.2em; 48 font-size: 0.95em; 49 text-decoration: none; 50 color: #444; 51} 52.dropdown__item-link:hover { 53 background: #CCFFFB; 54} 55

js

1(function () { 2 document.addEventListener('DOMContentLoaded', function() { 3 const btn = document.getElementById('dropdown__btn'); 4 if(btn) { 5 btn.addEventListener('click', function(){ 6 this.classList.toggle('is-open'); 7 }); 8 } 9 }); 10}());

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/13 05:43

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

回答3

0

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

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

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

投稿2021/05/21 15:13

Tatsunosuke

総合スコア599

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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'); }); }

投稿2021/05/13 09:18

takna

総合スコア784

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikage126

2021/05/14 00:37

ご回答ありがとうございます! 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

2021/05/14 08:35 編集

メニューが開いた時、次の日付がクリックできないのは、CSS で最前面に .dropdown__btn.is-open::after が全面レイヤーとして出てるからです。(ブラウザの開発ツールで確認してみてください) m.ts10806 さんの回答通り、querySelectorAll()で取得するのはリストなので、ループで処理する必要があります。補足ですが、カレンダー群を囲む要素にIDを付けるなりして検索するエリアを限定した方が良いです。あと、返り値が複数になるものは変数もそうと分かるようにしとく方が後々わかりやすいです。 ```javascript const calendarArea = document.getElementById('calendar-area'), btns = calendarArea.querySelectorAll('.dropdown__btn'); ```
guest

0

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

投稿2021/05/13 05:38

編集2021/05/13 05:47
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/13 05:43

いや、合ってるか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問