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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ポップアップ

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

php js カレンダーの日付をクリックして時間を選ぶポップアップを表示させたい

mikage126
mikage126

総合スコア2

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ポップアップ

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

0クリップ

1846閲覧

投稿2021/05/19 13:52

編集2021/05/20 01:56

前提・実現したいこと

イメージ説明
phpやjsを勉強中の初心者です。

予約システム作ろうとしています。

日付をクリックするとポップアップで時間が選べるメニューを表示させたいのですが
うまく動作しません
どこが間違っているのでしょうか
ご教授のほどよろしくお願いいたします。

おきている問題 エラーメッセージ

https://pixelog.net/post/rb8orj/
を参考に、ポップアップメニューを表示させたいのですが
現在の状態では日付をクリックしても反応がありません。

reserv-output.php:16 Uncaught TypeError: click is not a function
at NodeList.forEach (<anonymous>)
at HTMLDocument.<anonymous> (reserv-output.php:16)
(anonymous) @ reserv-output.php:16

該当のソースコード

js

(function () { document.addEventListener('DOMContentLoaded', function() { const calendarArea = document.getElementById('calendar-area'), btns = calendarArea.querySelectorAll('.dropdown__btn'); // ボタンを取得 if(btn) { btn.addEventListener('click', function(){ //ボタンがクリックされたら this.classList.toggle('is-open'); // is-openを付加する }); } }); }());

php

<?php $pdo=new PDO('mysql:host=localhost;dbname=sample;charset=utf8', 'root', 'root'); ?> <div class="wrapper"> <!-- xxxx年xx月を表示 --> <h1 id="header"> <?php echo "<div>".$now_year.'年'.$now_month."月</div>\n"; ?> </h1> <!-- カレンダー --> <?php $now_year = date("Y"); // 現在の年を取得 $now_month = date("n"); // 在の月を取得 $now_day = date("j"); // 現在の日を取得 // 曜日の配列作成 $weekday = array( "日", "月", "火", "水", "木", "金", "土" ); // 1日の曜日を数値で取得 $fir_weekday = date( "w", mktime( 0, 0, 0, $now_month, 1, $now_year ) ); ?> <div id="calendar-area"> <table> <tbody> <tr class="day0fweek"> <?php $i = 0; while( $i <= 6 ){ if($i == 0){ $style = "#C30"; } else if( $i == 6){ $style = "#03C"; } else{ $style = "black"; } echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n"; $i ++; } ?> </tr> <!-- 日付 --> <?php $i = 0;//カウンターリセット while( $i != $fir_weekday ){ //1日の曜日まで空白(&nbsp;)で埋める echo "\t<td>&nbsp;</td>\n"; $i ++; } for( $day=1; checkdate( $now_month, $day, $now_year); $day++){ if( $i > 6){ $i = 0; echo "</tr>\n"; echo "<tr>\n"; } if( $i == 0 ){ //日曜日の文字色 $style = "#C30"; } else if( $i == 6 ){ //土曜日の文字色 $style = "#03C"; } else{ //月曜~金曜日の文字色 $style = "black"; } // 今日の日付の場合、背景色追加 if( $day == $now_day ){ $style = $style."; background:silver"; } echo "\t<td style=\"color:".$style.";\">"; echo $day ; //当日以前の日付は× countの合計値が0なら日付に× 1以上あれば○  foreach ($pdo->query('select SUM(count) from reserv where date="'.$day.'"') as $row) { if($now_day>$day){ echo '<p class="but">×</p>' ; }elseif($row['SUM(count)']>0){ echo '<p class="ok">○</p>' ; }else{ echo '<p class="but">×</p>' ; } //クリックでポップアップさせたい部分 echo '<div class="dropdown">' ; echo '<button class="dropdown__btn"></button>' ; echo '<div class="dropdown__body">' ; echo '<ul class="dropdown__list">' ; echo '<form action="reserv-confirm.php" class="table" method="post">'; foreach ($pdo->query('select * from reserv where date="'.$day.'"') as $row) { if ($row['count']==0) { echo '<li class="dropdown__item"><p class="but">×', $row['time'], '</p></li>'; }else { echo '<li class="dropdown__item"><a class="dropdown__item-link"><p class="ok"><input type="submit" name="counter" value="', $row['id'], '">○', $row['time'], '</p></a></li>' ; } }    echo '</form>';    echo "\n"; echo '</ul>' ; echo '</div>' ; echo '</div>' ; } echo"</td>\n"; $i++; } while( $i < 7 ){ echo "\t<td>&nbsp;</td>\n"; $i++; } ?> </tbody> </table> </div> </div>

css

.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; }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

mikage126

2021/05/20 00:13 編集

失礼いたしました。何が問題か質問修正しております。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ポップアップ

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。