PHPのソースからjavascriptを呼び出して入力チェックのようなことをしているのですが、1つのjavascriptが全く効きません。
を確認しましたが、ブラウザはjavascript有効になっています。
デバッグツールも確認しましたが、エラーは出てません。
当然ですが、console.logの結果も出てきません。
他のjavascriptは問題なく動きます。
該当のソースだけ動かない原因がつかめませんでした。
原因究明にご協力いただければ幸いです。
該当ソースを添付します。
javascript
<?php ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cansel').addEventListener('click', function(){
let today = JSON.parse('<?php echo $today; ?>');
let reserveDate = JSON.parse('<?php echo $reserveDate; ?>');
let date1 = new Date(reserveDate);
let date2 = new Date(today);
//メッセージ
let dateMsg = document.getElementById('date_msg');
//メッセージ親
let msg = document.getElementById('msg')
console.log(date1);
console.log(date2);
let day = (date1 - date2) / 86400000;
console.log(day);
if(day < 2 && dateMsg === null) {
let msg = '予約日前日以降のキャンセルはできません';
let ptag = document.createElement('p');
ptag.id = 'date_msg';
let text = document.createTextNode(msg);
ptag.appendChild(text);
msg.appendChild(ptag);
event.preventDefault();
}
else{}
if(day < 2 && dateMsg !== null) {
document.getElementById('date_msg').remove();
let msg = '予約日前日以降のキャンセルはできません';
let ptag = document.createElement('p');
ptag.id = 'date_msg';
let text = document.createTextNode(msg);
ptag.appendChild(text);
msg.appendChild(ptag);
event.preventDefault();
}
else{}
if(day >= 2 && dateMsg !== null) {
document.getElementById('date_msg').remove();
}
},false)
},false)
</script>
<noscript>
JavaScriptを実行できません。
</noscript>;
（参考）呼び出し元のPHP
<?php
session_start();
header('Expires:-1');
header('Cache-Control:');
header('Pragma:');
function generateToken(){
$bytes = openssl_random_pseudo_bytes(16);
return bin2hex($bytes);
}
$token = generateToken();
$_SESSION['token'] = $token;
function escape($val)
{
return htmlspecialchars($val, ENT_QUOTES | ENT_HTML5, 'UTF-8');
}
require_once("db_connect.php");
require_once('password_db.php');
$date = date("Y/m/d");
$today = json_encode($date);
?>
<!doctype html>
<html lang=ja>
<head>
<meta charset="utf-8">
<title>予約確認</title>
<meta name="description" content="マイページ">
<!--リセットcss-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!--css-->
<link rel="stylesheet" href="css/mypage.css">
<!--レスポンシブ対応-->
<meta name="viwport" content="width=device-width, initial-scale=1">
<!--Googleフォント-->
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<?php require_once('header.php')?>
<h1>予約確認</h1>
<!--<div class="hd">-->
<form action="mypage_reserve_cansel.php" method="post" class = "reserve_form">
<table class="tablehead">
<tr>
<th class="header">予約日</th>
<th class="header">時間帯</th>
<th class="header">サービス</th>
<th class="header">オプション</th>
<th class="header">料金</th>
<th class="header2"></th>
</tr>
<!--</table>-->
<?php
$sql = "select
r.reserve_id,
r.reserve_date,
t.time_zone_text,
s.service_name,
o.option_name,
r.customer_id,
r.time_zone_id,
r.service_id,
r.option_id,
r.total_amount
from
reservation r,
time_zone t,
service s,
option o
where
r.time_zone_id = t.time_zone_id
and
r.service_id = s.service_id
and
r.option_id = o.option_id
and
r.reserve_date >= :current_date";
$stmt = $pdo->prepare($sql);
$stmt -> bindValue(':current_date', date('Y-m-d'));
$stmt -> execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach($row as $data):
?>
<!--<table class="reserve_table">-->
<tr>
<input type="hidden" name="token" class="token" id="token" value="<?=$token?>">
<input type="hidden" name="reserve_id" class="reserve_id" id="reserve_id" value="<?=$data['reserve_id']?>">
<input type="hidden" name="time_zone_id" class="time_zone_id" id="time_zone_id" value="<?=$data['time_zone_id']?>">
<input type="hidden" name="service_id" class="service_id" id="service_id" value="<?=$data['service_id']?>">
<input type="hidden" name="option_id" class="option_id" id="option_id" value="<?=$data['option_id']?>">
<td class="dt">
<input type="text" name="reserve_date" value="<?=escape($data['reserve_date'])?>" id="reserve_date" readonly="readonly">
</td>
<td class="dt">
<input type="text" name="time_zone_text" value="<?= escape($data['time_zone_text'])?>" id="time_zone_text" readonly="readonly">
</td>
<td class="dt">
<input type="text" name="service_name" value="<?= escape($data['service_name']) ?>" id="service_name">
</td>
<td class="dt">
<input type="text" name="option_name" value="<?= escape($data['option_name'])?>" id="option_name">
</td>
<td class="dt">
<input type="text" name="total_amount" value="<?= escape($data['total_amount'])?>" id="total_amount">
</td>
<td class="bt">
<button type="submit" name="cansel" class="cansel" id="cansel">キャンセル</button>
</td>
</tr>
<?php endforeach; ?>
</table>
<div id="msg">
<div>
<div class="bt_re">
<button type="button" class="return" name="return" id="return" onclick="history.back()">戻る</button>
</div>
</form>
<?php
$rDate = date('Y/m/d', strtotime(escape($data['reserve_date'])));
$reserveDate = json_encode($rDate);
?>
<?php require_once('js/mypage_cansel_check_js.php')?>
<?php require_once('footer.php')?>
</body>
</html>
