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

Question

前提・実現したいこと

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

該当のソースコード

(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
$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 ){ //１日の曜日まで空白（&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の合計値が０なら日付に× １以上あれば○　
	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>

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

Comments

[m.ts10806]

「うまくいかない」などで伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

btns ？　btn　？

[mikage126]

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

Answer 1

(function () {
  document.addEventListener('DOMContentLoaded', function() {
    const btn = document.querySelectorAll('.ok');
    if(btn) {
      btn.forEach(x=>{
    x.addEventListener("click",() => {
      x.nextElementSibling.classList.toggle("is-open");
    });
  });
    }
  });
}());

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

Answer 2

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

if(btn) { 
  btn.addEventListener('click', function(){ 

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

Comments

[mikage126]

恐れ入ります。
・変数　・リストのループ　に関して書き方訂正したのですが合っているのでしょうか
また、・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');
});
}
});
}());

[m.ts10806]

>if(btns) {
リストなのでlengthを確認したほうが良いかもしれません。

>・this より要素を明示
forEachの引数にループしたリスト内の各要素がelementとして利用できるので、そちらを使う。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

[mikage126]

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

[m.ts10806]

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

[mikage126]

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

[m.ts10806]

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