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

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

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

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

ポップアップ

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

JavaScript

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

Q&A

解決済

2回答

3488閲覧

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

mikage126

総合スコア2

PHP

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

ポップアップ

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

JavaScript

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

0グッド

0クリップ

投稿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

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

php

1 2<?php 3$pdo=new PDO('mysql:host=localhost;dbname=sample;charset=utf8', 4 'root', 'root'); 5?> 6<div class="wrapper"> 7<!-- xxxx年xx月を表示 --> 8<h1 id="header"> 9<?php 10echo "<div>".$now_year.'年'.$now_month."月</div>\n"; 11?> 12</h1> 13 14<!-- カレンダー --> 15 16<?php 17$now_year = date("Y"); // 現在の年を取得 18$now_month = date("n"); // 在の月を取得 19$now_day = date("j"); // 現在の日を取得 20// 曜日の配列作成 21$weekday = array( "日", "月", "火", "水", "木", "金", "土" ); 22// 1日の曜日を数値で取得 23$fir_weekday = date( "w", mktime( 0, 0, 0, $now_month, 1, $now_year ) ); 24?> 25 26<div id="calendar-area"> 27<table> 28<tbody> 29<tr class="day0fweek"> 30 <?php 31$i = 0; 32 while( $i <= 6 ){ 33 34 if($i == 0){ 35 $style = "#C30"; 36} 37else if( $i == 6){ 38$style = "#03C"; 39} 40else{ 41$style = "black"; 42} 43 44echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n"; 45$i ++; 46} 47 48 ?> 49 50</tr> 51 52 <!-- 日付 --> 53<?php 54$i = 0;//カウンターリセット 55 56while( $i != $fir_weekday ){ //1日の曜日まで空白(&nbsp;)で埋める 57 echo "\t<td>&nbsp;</td>\n"; 58 $i ++; 59} 60 61for( $day=1; checkdate( $now_month, $day, $now_year); $day++){ 62 63 if( $i > 6){ 64 $i = 0; 65 echo "</tr>\n"; 66 echo "<tr>\n"; 67 } 68 69 if( $i == 0 ){ //日曜日の文字色 70 $style = "#C30"; 71 } 72 else if( $i == 6 ){ //土曜日の文字色 73 $style = "#03C"; 74 } 75 else{ //月曜~金曜日の文字色 76 $style = "black"; 77 } 78 79 // 今日の日付の場合、背景色追加 80 if( $day == $now_day ){ 81 $style = $style."; background:silver"; 82 } 83 84 echo "\t<td style=\"color:".$style.";\">"; 85 echo $day ; 86 //当日以前の日付は× countの合計値が0なら日付に× 1以上あれば○  87 foreach ($pdo->query('select SUM(count) from reserv where date="'.$day.'"') as $row) { 88 89 if($now_day>$day){ 90 echo '<p class="but">×</p>' ; 91 }elseif($row['SUM(count)']>0){ 92 echo '<p class="ok">○</p>' ; 93 }else{ 94 echo '<p class="but">×</p>' ; 95 } 96 //クリックでポップアップさせたい部分 97 echo '<div class="dropdown">' ; 98 echo '<button class="dropdown__btn"></button>' ; 99 echo '<div class="dropdown__body">' ; 100 echo '<ul class="dropdown__list">' ; 101 102echo '<form action="reserv-confirm.php" class="table" method="post">'; 103foreach ($pdo->query('select * from reserv where date="'.$day.'"') as $row) { 104 105if ($row['count']==0) { 106echo '<li class="dropdown__item"><p class="but">×', $row['time'], '</p></li>'; 107 108}else { 109echo '<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>' ; 110 } 111 } 112   echo '</form>'; 113   echo "\n"; 114 echo '</ul>' ; 115 echo '</div>' ; 116 echo '</div>' ; 117 } 118 echo"</td>\n"; 119 $i++; 120 } 121 while( $i < 7 ){ 122 echo "\t<td>&nbsp;</td>\n"; 123 $i++; 124 } 125 ?> 126</tbody> 127</table> 128</div> 129</div>

css

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

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

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

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

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

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

mikage126

2021/05/20 00:13 編集

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

回答2

0

自己解決

js

1(function () { 2 document.addEventListener('DOMContentLoaded', function() { 3 const btn = document.querySelectorAll('.ok'); 4 if(btn) { 5 btn.forEach(x=>{ 6 x.addEventListener("click",() => { 7 x.nextElementSibling.classList.toggle("is-open"); 8 }); 9 }); 10 } 11 }); 12}());

css

1.dropdown:not(.is-open) { 2 display: none;

投稿2021/05/22 09:55

mikage126

総合スコア2

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

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

0

btns = calendarArea.querySelectorAll('.dropdown__btn'); // ボタンを取得

if(btn) { btn.addEventListener('click', function(){
  • btnsで結果を受け取っているのに未定義の変数btnを利用している。変数名は単なる文字列の集合体なので「複数形」「単数形」の概念はないです。1字違えば別のもの
  • querySelectorAllの返却値はリスト。addEventListenerの対象は特定の要素。リストはループさせないと個々の要素は取り出せない
  • thisより要素を明示したほうがいいと思う(個人の感覚)。

投稿2021/05/20 00:13

m.ts10806

総合スコア80871

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

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

mikage126

2021/05/20 00:52 編集

恐れ入ります。 ・変数 ・リストのループ に関して書き方訂正したのですが合っているのでしょうか また、・this より要素を明示という部分を調べても何をどうすれば良いのか検討つかずでして ご教授いただけますでしょうか...? (function () { document.addEventListener('DOMContentLoaded', function() { const calendarArea = document.getElementById('calendar-area'), btns = calendarArea.querySelectorAll('.dropdown__btn'); if(btns) { btns.forEach('click', function(){ this.classList.toggle('is-open'); }); } }); }());
mikage126

2021/05/20 01:38

というとこうなるのでしょうか..調べたなりに修正してみましたが.. if(btns.length) { btns.forEach('click', function(element){ this.classList.toggle('is-open');
m.ts10806

2021/05/20 01:41

element使いましょう。引数で受けただけになってます。
mikage126

2021/05/20 01:58

すいません こちらであっているのでしょうか と今のところ動作は確認できておりません.. if(btns.length) { btns.forEach('click', function(element){ this.classList.toggle(element);
m.ts10806

2021/05/22 11:43 編集

いいえ。 各機能の意味をちゃんと調べてください。 toggleの引数にはトグルさせるクラス名(文字列)です。 elementのclasslistからクラス名をtoggleでするんですよね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問